一款乾坤八卦风水罗盘旋转CSS3动画特效代码，给人一种玄机重重的感觉。

这是一款基于css3实现酷炫的风水罗盘旋转动画特效源码。界面中的风水罗盘各个环状罗盘呈现出不同速度独立旋转的效果。动画特效采用css3技术实现，没有引入任何js脚本元素，整体界面动画效果炫酷华丽，是一款比较典型的css3动画特效源码。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。

css3罗盘动画特效。酷炫罗盘特效。

在这里插入图片描述

文件目录

在这里插入图片描述

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></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;
}

body {
    
    
    min-width: 1190px;
    background-color: #000002;
}

a {
    
    
    text-decoration: none;
}

img {
    
    
    border: none;
}

.w {
    
    
    width: 700px;
}

.h {
    
    
    height: 700px;
}

.compass-main {
    
    
    width: 100%;
    height: 800px;
    background-color: #000002;
}

.compassdiv {
    
    
    width: 1190px;
    height: 800px;
    margin: 0 auto;
    background-image: url(../images/compass/c-a-bj.jpg);
    position: relative;
}

.compassdiv .compass-c {
    
    
    width: 1190px;
    height: 800px;
    background-image: url(../images/compass/c-a-c.png);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
}
@-moz-keyframes rotate {
    
    
    100% {
    
    
        -moz-transform: rotate(0deg);
    }
    100% {
    
    
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    
    
    100% {
    
    
        -webkit-transform: rotate(0deg);
    }
    100% {
    
    
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    
    
    100% {
    
    
        transform: rotate(0deg);
    }
    100% {
    
    
        transform: rotate(360deg);
    }
}

.compassdiv .compass {
    
    
    background-image: url(../images/compass/c-a-0.png);
    position: absolute;
    top: 40px;
    left: 160px;
    z-index: 1;
}

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

....
    完整代码在下方↓公众号获取