📂文章目录

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：​​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​​​ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

97-时光不老,我们不散love520

🧩 2.图片演示

HTML5七夕情人节表白代码 (动态3D相册) HTML+CSS+JS_css

四、💒 网站代码

🧱HTML结构代码

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>520表白</title>
    <style style="text/css">*{margin:0;padding:0;}
      body{background:url("images/1.jpg");background-size:cover;}
      /*start top*/
      .top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#fff;
      <!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);
      -webkit-background-clip:text;-->}
      /*end top*/
      /*start box*/
      .box{width:310px;height:310px;margin:auto;perspective:800px;/*景深*/}
      .box .pic{position:relative;transform-style:preserve-3d;/*3d环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}
      .box ul li{list-style:none;position:absolute;top:0;left:0;}
      /*start box*/
      /*定义一个关键帧*/
      @keyframes{
        from{transform:rotateY(0deg);}
        to{transform:rotateY(360deg);}
      }
      /*start text*/
      #text{width:500px;height:200px;color:#6fade1;margin:auto;font-size:24px;font-family:"方正喵呜体";}
      /*end text*/</style>
  </head>
  <body>
    <!--start top-->
    <div class="top">
      <marquee behavior="alternate">时光不老，我们不散</marquee>
    </div>
    <!--end top-->
    <!--start box-->
    <div class="box">
      <div class="pic">
        <ul>
          <li><img src="images/1.png" width="" height="" alt=""/></li>
          <li><img src="images/2.png" width="" height="" alt=""/></li>
          <li><img src="images/3.png" width="" height="" alt=""/></li>
          <li><img src="images/4.png" width="" height="" alt=""/></li>
          <li><img src="images/5.png" width="" height="" alt=""/></li>
          <li><img src="images/6.png" width="" height="" alt=""/></li>
        </ul>
      </div>
    </div>
    <!--end box-->
    <!--start text-->
    <div id="text"></div>
    <!--end text-->
    <embed src="music.mp3" hidden="true"/>
    
    <script src="js/jquery.min.js"></script>
    <!--雪花-->
    <script src="js/snow.js"></script>
    <script>$(".pic ul li").each(function(i){//遍历
        var deg=360/$(".pic ul li").size();//size个数
        //当前的li对象 添加css样式
        $(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
        
        $.fn.snow({
          minSize:10,
          maxSize:15,
          newOn:500,
          flakeColor:"#ffffff"
        });
      });
      
      var i=0;
      var str="能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！";
      
      window.onload=function typing(){
        //获取div
        var mydiv=document.getElementById("text");
        mydiv.innerHTML+=str.charAt(i);
        i++;
        var id=setTimeout(typing,100);
        if(i==str.length){
          clearTimeout(id);
        }
      }</script>
  </body>
</html>

五、🎁更多源码

1.如果我的博客对你有帮助 ​​请 “👍点赞” “✍️评论” “💙收藏” ​​一键三连哦！

2.​​💗【🉑关注我| 获取更多源码】 ​​带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习