趣玩Demo:纯css实现旋转的太极图

大道,在太极之上而不为高;在六极之下而不为深;先天地而不为久;长于上古而不为老。人生就是一种修行,应顺应大道至德和自然规律,不为外物所拘,“无为而无不为”。周末闲来无事,用css绘制一个太极图,在转动的阴阳图上领略生命的奥秘。

taiji

在此之前你要掌握的一些基础是:

  • border圆角的实现及特点
  • :before和:after的使用
  • css简单动画

绘图分析

要绘制一个太极图,首先要先仔细观察分析,有图层概念的人很容易找到合成方法,如下图:

taiji_part

看到这里,相信很多人都已经明白了,赶紧去先自己尝试一下吧!还不太明白的继续往下看。

我们将太极分成了三部分,利用width和border实现底部黑白主体部分,然后绘制两个width和border颜色不同的圆绝对定位到主体部分。

代码实现

先在html中定义一个ID为”taiji”的div

1
<div id="taiji"></div>

绘制主体部分

1
2
3
4
5
6
7
8
9
#taiji{
position:relative;
width: 98px;
height: 198px;
background-color: #fff;
border:2px solid #000;
border-right-width: 100px;
border-radius:50%;
}

两个小圆的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#taiji:before{
content:'';
position:absolute;
top:0;
left:50%;
width: 24px;
height: 24px;
background-color: #000;
border:37px solid #fff;
border-radius:50%;
}
#taiji:after{
content:'';
position:absolute;
top:50%;
left:50%;
width: 24px;
height: 24px;
background-color:#fff;
border:37px solid #000;
border-radius:50%;
}

至此,一个静态的太极图已经绘制完成,是不是很简单呢。

让太极图转起来

使用animation属性并将播放次数设为infinite就可实现无限循环转动,实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#taiji{
animation: rotate 8s linear infinite;
-webkit-animation: rotate 8s linear infinite;
}
@keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate{
from{-ms-transform:rotate(0deg)}
to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate{
from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(360deg)}
}

总结:在开发中也许永远也用不到这个图形,但在这个例子中可以学到很多方法,巧妙利用border-radius,可以绘制出很多形状。最后在转动太极图中去参悟人生吧!

竹风原创,欢迎交流学习。转载请附上本文链接,谢谢!

最后更新:

原始链接: http://wangzc.cc/blog/demos-taiji/