表白网页制作_表白网页_创意表白_表白神器

原创

html网页设计 2022-10-09 00:45:56 ©著作权

文章标签 前端 css css3 html 文件包含 文章分类 运维

©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍
三、🔗网站效果

▶️1.视频演示
🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码
🏠CSS样式代码

五、🎁更多源码

二、📚网站介绍

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

款乾坤八卦风水罗盘旋转CSS3动画特效代码

🧩 2.图片演示

表白网页制作_表白网页_创意表白_表白神器_文件包含

四、💒 网站代码

🧱HTML结构代码

<!--
 * @Author: your name
 * @Date: 2021-01-14 16:21:58
 * @LastEditTime: 2021-01-14 16:22:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jiaoben4947\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3风水罗盘旋转动画特效</title>

    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="compass-main">
      <div class="compassdiv">
        <div class="compass-c"></div>
        <div class="compass w h">
          <div class="compass-1 w h"></div>
          <div class="compass-2 w h"></div>
          <div class="compass-3 w h"></div>
          <div class="compass-4 w h"></div>
          <div class="compass-5 w h"></div>
          <div class="compass-6 w h"></div>
          <div class="compass-7 w h"></div>
          <div class="compass-8 w h"></div>
          <div class="compass-9 w h"></div>
          <div class="compass-10 w h"></div>
          <div class="compass-11 w h"></div>
          <div class="compass-12 w h"></div>
          <div class="compass-13 w h"></div>
          <div class="compass-14 w h"></div>
          <div class="compass-15 w h"></div>
          <div class="compass-16 w h"></div>
          <div class="compass-17 w h"></div>
          <div class="compass-18 w h"></div>
          <div class="compass-19 w h"></div>
        </div>
      </div>
    </div>
  </body>
</html>

🏠CSS样式代码

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    list-style: none;
}


.compassdiv .compass .compass-9 {
    background-image: url(../images/compass/c-a-9.png);
    position: absolute;
    z-index: 9;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .45s;
    -webkit-transition: all .45s;
    transition: all .45s;
    -moz-animation: rotate 45s infinite linear;
    -webkit-animation: rotate 45s infinite linear;
    animation: rotate 45s infinite linear;
}

.compassdiv .compass .compass-10 {
    background-image: url(../images/compass/c-a-10.png);
    position: absolute;
    z-index: 10;
}

.compassdiv .compass .compass-11 {
    background-image: url(../images/compass/c-a-11.png);
    position: absolute;
    z-index: 11;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .55s;
    -webkit-transition: all .55s;
    transition: all .55s;
    -moz-animation: rotate 55s infinite linear;
    -webkit-animation: rotate 55s infinite linear;
    animation: rotate 55s infinite linear;
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.compassdiv .compass .compass-12 {
    background-image: url(../images/compass/c-a-12.png);
    position: absolute;
    z-index: 12;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .45s;
    -webkit-transition: all .45s;
    transition: all .45s;
    -moz-animation: rotate 45s infinite linear;
    -webkit-animation: rotate 45s infinite linear;
    animation: rotate 45s infinite linear;
}

.compassdiv .compass .compass-13 {
    background-image: url(../images/compass/c-a-13.png);
    position: absolute;
    z-index: 13;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .35s;
    -webkit-transition: all .35s;
    transition: all .35s;
    -moz-animation: rotate 35s infinite linear;
    -webkit-animation: rotate 35s infinite linear;
    animation: rotate 35s infinite linear;
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.compassdiv .compass .compass-14 {
    background-image: url(../images/compass/c-a-14.png);
    position: absolute;
    z-index: 14;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    -moz-animation: rotate 25s infinite linear;
    -webkit-animation: rotate 25s infinite linear;
    animation: rotate 25s infinite linear;
}

.compassdiv .compass .compass-15 {
    background-image: url(../images/compass/c-a-15.png);
    position: absolute;
    z-index: 15;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    -moz-animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
    animation: rotate 3s infinite linear;
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.compassdiv .compass .compass-16 {
    background-image: url(../images/compass/c-a-16.png);
    position: absolute;
    z-index: 16;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .35s;
    -webkit-transition: all .35s;
    transition: all .35s;
    -moz-animation: rotate 35s infinite linear;
    -webkit-animation: rotate 35s infinite linear;
    animation: rotate 35s infinite linear;
}

.compassdiv .compass .compass-17 {
    background-image: url(../images/compass/c-a-17.png);
    position: absolute;
    z-index: 17;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .15s;
    -webkit-transition: all .15s;
    transition: all .15s;
    -moz-animation: rotate 15s infinite linear;
    -webkit-animation: rotate 15s infinite linear;
    animation: rotate 15s infinite linear;
}

.compassdiv .compass .compass-18 {
    background-image: url(../images/compass/c-a-18.png);
    position: absolute;
    z-index: 18;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    -moz-animation: rotate 25s infinite linear;
    -webkit-animation: rotate 25s infinite linear;
    animation: rotate 25s infinite linear;
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.compassdiv .compass .compass-19 {
    background-image: url(../images/compass/c-a-19.png);
    position: absolute;
    z-index: 19;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-background-size: 700px 350px;
    -moz-background-size: 700px 350px;
    background-size: 700px 700px;
    -webkit-border-radius: 350px;
    border-radius: 350px;
    -moz-transition: all .20s;
    -webkit-transition: all .20s;
    transition: all .20s;
    -moz-animation: rotate 20s infinite linear;
    -webkit-animation: rotate 20s infinite linear;
    animation: rotate 20s infinite linear;
}