HTML5和CSS3制作太极图动态变化

效果如下：

这是小编接触前端的第一个小案例，一开始小编被这酷炫的特效所吸引，心中就想着这到底是怎么实现的，所以小编就自己学习了一下。

下面是代码系列

相信有代码基础的，都能够看懂上面的代码。

实现思想

首先其实就是建一个div的容器，用border—radius：50%使之成为一个圆形，然后在div容器中再加两个div容器分别实现左右两边的黑白圆，然后用@keyframe实现动画并用animation delay实现两个圆动画的延迟开始时间，使连个里面黑白圆的动画异步，一个变大而另一个变小。

开发工具

有兴趣的小伙伴可以自己去尝试哦，这里推荐几个开发的小工具，sublime、editplus、vs code、vs、webstorm等等，其中vs个人觉得比较累赘，因为里面的东西太多，加载会比较慢，如果只是为了写个小的demo，建议用sublimei，当然对于新手想有所提高的，可以用editplus，这个是纯手打没有代码提示的，可以帮助加强代码的记忆。