前端特效02:使用纯CSS实现动态太极

今天开始~小编将与大家分享一系列的web前端特效荟萃,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~



第二期,给大家分享一个使用纯CSS生成的动态太极效果, 相关CSS代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
body{
background:#CFCFCF;
}
.box-taiji{
  width:0px;
  height:400px;
  position:relative;
  margin:50px auto;
  border-left:200px solid #000;
  border-right:200px solid #fff;
  border-radius:50%;
  animation:move 1s linear infinite;
}
.box-taiji:before,
.box-taiji:after{
  position:absolute;
  content:"";
  display:block;
}
.box-taiji:before{
  width:200px;
  height:200px;
  top:0px;
  left:-100px;
  z-index:1;
  background-color:#fff;
  border-radius:50%;
  box-shadow:0 200px 0 #000;
}
.box-taiji:after{
  width:60px;
  height:60px;
  top:70px;
  left:-30px;
  z-index:2;
  background-color:#000;
  border-radius:50%;
  box-shadow:0 200px 0 #fff;
}
@keyframes move{
  0%{
    transform:rotate(0deg);
  }100%{
    transform:rotate(360deg);
  }
}
  </style>
</head>
<body>
 <div class="box-taiji"></div>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>


在线演示:Here~ 


今天的分享就是这些啦,这里是igeekbar,希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些酷酷的前端特效,赶快留言分享给我们呦~~~


Geek豪哥   iGeekBar社区大管家

iGeekBar创始人之一,热爱科技与设计,正在探索研究数据科学的女猿,最爱勾搭极客帅哥美女的逗比疯姑娘~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~