前言
介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果，点击：八卦图
代码如下：
HTML部分
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div id="yinyang"></div>
</body>
</html>CSS部分body{background: #444444;
}
@keyframes spin{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}
#yinyang{width: 100px;height: 100px;border-radius: 50%;position: relative;margin: 100px auto;background: linear-gradient(to bottom,#ffff 0%,#ffff 50%,#000000 50%,#000000 100%);animation-duration: 3s; /*animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。*/animation-name: spin;animation-iteration-count: infinite; /*infinite 无限循环播放动画.*//*animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.*/animation-timing-function:linear; /*CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。*/
}
#yinyang:before{position: absolute;width: 10px;height: 10px;content: "";top: 25%;left:0;border-radius: 50%;border: 20px black solid;background: white;
}
#yinyang:after{position: absolute;width: 10px;height: 10px;content: "";top: 25%;right:0;border-radius: 50%;border: 20px white solid;background: black;
}
