几分钟用CSS3实现太极特效（html画太极）

相比于CSS2，CSS3增加了很多有关于视觉享受上面的特效，这些特效在平时的页面里面也许只是在一些非常不起眼的出现，但实际上如果运用得当，这些特效将会出现非常酷炫的效果。今天，我们就一起来用CSS3的一些新的样式（渐变、过渡动画、圆角），来实现一个非常漂亮的太极圆盘。首先，我们先来看一下最后的效果：

当鼠标放上去之后还会出现旋转的动画：

怎么样，是不是非常的炫酷？效果看起来非常不错，但实际上用代码实现起来却非常的简单，下面由我一步一步进行解析，一步步将这个太极效果实现。第一步，先将太极的轮廓（圆形）画出来，顺便做一个绝对居中：

样式：

此时我们的太极图标是看不见的，不要着急，这是因为我们现在没有给他填充颜色，下面进行第二步，也是最为关键的一步。第二步，使用渐变将太极的内部画出来，：

效果：

什么？只有一个半圆形的黑色？不要着急，这是因为太极的上半部分是白色的，所以和我们的背景色重复了，我们只需要再给太极加上一个外阴影，就可以看清太极的轮廓了：

效果：

怎么样，是不是看起来炫酷了很多？第三步，使用伪元素将太极内部的两个原点勾勒出来，先使用伪元素画出一个圆圈，然后用边框将圆球内白外黑的效果实现，最后用定位移动到太极的左部居中：

效果：

怎么样？是不是看出来了一点端倪？第四步，用同样的方法将右面的原点实现出来：

效果：

最后一步，为太极加上旋转效果：

然后给#gossip加上过度动画：

就这样，一个炫酷的太极效果就这样被我们实现出来了，同样的方法还可以做一个太阳、星球、精灵球等等，授人以鱼不如授人以渔，方法教给大家之后，剩下的就靠大家各自的想象力去实现了！

未经许可禁止转载。