css---border-radius--实现太极图旋转

先上图观看效果：

本次只要是通过css3的border-radius属性实现。分析！

主要分为四个部分：

第一就是画出大圆作为容器，

第二就是画出左右两个半圆，

第三就是画出突出来的中等的圆，通过绝对定位来定位置，

最后就是画出小圆，也是通过绝对定位来定位置，ps：小圆需要z-index来悬浮在顶层。

话不多说，先上html结构：

<!-- 圆容器 --><div class="circle"><div class="left"> <!-- 左半圆 --><div class="left_middle"><!-- 左半中圆 --><div class="left_small"></div> <!-- 左半小圆 --></div></div><div class="right"><!-- 右半圆 --><div class="right_middle"><!-- 右半中圆 --><div class="right_small"></div><!-- 右半小圆 --></div></div></div>

再上css样式：

/*画出一个圆当做容器*/.circle{margin: 100px auto;width: 200px;height: 200px;border-radius: 50%;border: 1px solid #ccc;animation:run 4s linear 0s infinite ; /*添加上动画*/}/*左半边*/.left{width: 100%;height: 50%;border-radius:100px 100px 0 0;background-color: black;position: relative;}.left_middle{width: 100px;height: 100px;border-radius: 50%;background-color: white;position: absolute;top: 50px;}.left_small{width: 40px;height: 40px;border-radius: 50%;background-color: black;position: absolute;left: 28px;top: 28px;z-index: 999;}/*右半边*/.right{width: 100%;height: 50%;border-radius:0 0 100px 100px;background-color:white;position: relative;}.right_middle{width: 100px;height: 100px;border-radius: 50%;background-color: black;position: absolute;top:-50px;left: 100px;}.right_small{width: 40px;height: 40px;border-radius: 50%;background-color: white;position: absolute;left: 28px;top: 28px;z-index: 999;}

到此为止太极图基本完成：

最后添上动画，变大功告成了：

/*旋转动画*/@keyframes run{from{transform: rotate(0deg);}to{transform: rotate(-360deg);}}

最后来补习下CSS3动画的知识点：动画的详细资料

通过@keyframes来定义我们自定义的动画：

@keyframes myfirst{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 "ease"。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3animation-fill-mode规定对象动画时间之外的状态。3

animation 属性是简写属性，属性的顺序按照上图开始，顺序到最后的书写方式。

animation-name

即@keyframes 定义的动画名；

animation-duration

动画的时间，默认是0；

animation-timing-function

animation-timing-function:value; value的值如下：

值描述测试linear动画从头到尾的速度是相同的。测试ease默认。动画以低速开始，然后加快，在结束前变慢。测试ease-in动画以低速开始。测试ease-out动画以低速结束。测试ease-in-out动画以低速开始和结束。测试cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-direction

animation-direction: normal|alternate;

值描述测试normal默认值。动画应该正常播放。测试alternate动画应该轮流反向播放。

animation-play-state

语法

animation-play-state: paused|running;

值描述测试paused规定动画已暂停。测试running规定动画正在播放。

animation-fill-mode

语法

animation-fill-mode : none | forwards | backwards | both;

值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both向前和向后填充模式都被应用。