📂文章目录

二、📚网站介绍

📒网站文件方面：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.视频演示

11-3D雪花展开相册

🧩 2.图片演示

表白网页制作_表白网站模板_表白网站模板下载_html

四、💒 网站代码

🧱HTML结构代码

<!--
 * @Author: your name
 * @Date: 2020-12-30 10:24:14
 * @LastEditTime: 2020-12-30 10:28:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \正方体旋转动画\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <!--下雪动画-->
    <script src="js/jquery.min.js"></script>


  </head>

  <body>
    <div class="snow-container">
      <div class="ziti">
        <span> ❤各位新年快乐呀！！ </span>
      </div>

      <div class="dongtai">
        <ul>
          <li>
            <img src="image/1.png" alt="" />
          </li>
          <li>
            <img src="image/2.png" alt="" />
          </li>
          <li>
            <img src="image/3.png" alt="" />
          </li>
          <li>
            <img src="image/4.png" alt="" />
          </li>
          <li>
            <img src="image/5.png" alt="" />
          </li>
          <li>
            <img src="image/6.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

🏠CSS样式代码

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background-image: url("../image/timg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

li:nth-of-type(5) {
    background-size: cover;
    left: 0;
    top: -200px;
    transform-origin: bottom;
    animation: boo5 10s infinite alternate;
}

li:nth-of-type(6) {
    background-size: cover;
    left: 0;
    top: 200px;
    transform-origin: top;
    animation: boo6 10s infinite alternate;
}

@keyframes {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(-45deg);
    }
    30% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(-90deg);
    }
}

@keyframes {
    0% {
        transform: translateZ(-10px) rotateY(0deg);
    }
    20% {
        transform: translateZ(-100px) rotateY(-90deg);
    }
    30% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
    100% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
}

@keyframes {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(45deg);
    }
    30% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(90deg);
    }
}

@keyframes {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(45deg);
    }
    30% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@keyframes {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(-45deg);
    }
    30% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    20% {
        transform: rotateX(-45deg) rotateY(-45deg);
    }
    30% {
        transform: rotateX(-45deg) rotateY(-135deg);
    }
    40% {
        transform: rotateX(-45deg) rotateY(-215deg);
    }
    50% {
        transform: rotateX(-45deg) rotateY(-305deg);
    }
    60% {
        transform: rotateX(-45deg) rotateY(-395deg);
    }
    70% {
        transform: rotateX(-135deg) rotateY(-395deg);
    }
    80% {
        transform: rotateX(-225deg) rotateY(-395deg);
    }
    90% {
        transform: rotateX(-315deg) rotateY(-395deg);
    }
    100% {
        transform: rotateX(-405deg) rotateY(-395deg);
    }
}

.ziti {
    text-align: center;
    font-size: 60px;
    position: absolute;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: calc( 50% - 240px);
}

span {
    font-family: "微软雅黑";
    line-height: 50px;
    /*关键代码*/
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
}

/*关键代码*/

@-webkit-keyframes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

五、🎁更多源码

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