对于CSS的认识如果你还只停留在网页的一些元素的美化,版面样式的调整那你就是大错特错了,现在的CSS3所具备的特性真的是让人惊艳。 除了原有的css2所具备的特性外,更是加入了RGBA和透明度,让你可以轻松的可以设置任何颜色任何透明透的背景色。
text-shadow阴影,font-face属性,border-radius属性,border-image属性, box-shadow属性以及更炫的支持动画,放大,旋转,以及媒体查询等等功能。今天做网站小编给你来分享的是利用css3技术实现太极图的效果。
先看一下太极图的样子,没错,就是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/4c4e05521cd7dc36c449450850f6cf58.png)
那么问题来了,这样的一个太极图是怎么样实现的呢?
我们来分解一下,先写一个div标签,类似于这样:
<div class="taiji"></div>
我们给taiji 这个class 定义一点样式:
.taiji { width: 150px; /*宽度*/height: 300px; /*高度*/ margin: 100px auto; /*上下100像素 居中 */ border-right: 150px solid #000; /*给一个150像素的黑色右边框*/ background-color: #fff; /*盒子的背景色为白色 */}
那么看一下,它就会长成这样子的:
![](https://i-blog.csdnimg.cn/blog_migrate/683d2737eeee0941aca9df3000cc7934.png)
然后我们给它变圆角,样式给它再加上一句:
.taiji { border-radius: 150px; /*加上圆角 */}
那么它将变成这样子:
![](https://i-blog.csdnimg.cn/blog_migrate/1a01f7e4234cd0fc20dd4565cfe42f18.png)
继续,这个时候我们再给这个taiji的class 加上::before,::after两个伪类,这样我们不需要额外再添加div的标签。样式如下:
.taiji::before,.taiji::after { content: ''; /*内容为空*/ display: block; /*设置为块级元素*/ width: 50px; /*宽度50像素 */ height: 50px; /*高度50像素*/ background-color: #fff; /*背景色为白色*/ border: 50px solid #000; /*边框50像素为黑色 */ border-radius: 75px; /*边框设为圆然,也可以与100% */}
看一下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/3271e60b61399ee7713cbb9e444464db.png)
两个一样的圆,我们把::after那个设置为黑底白边,区别于::before那个,代码如下:
.taiji::after {background-color: #000; /*黑色底*/ border: 50px solid #fff; /*50像素白边框 */}
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c2fc0751af85eced60edb62eb13824d0.png)
接下来就是移动一下位置了,加入以下代码:
.taiji::before,.taiji::after { margin-left:50%; /*左边距移动50% */}
OK,见证奇迹的时刻到了,看图:
![](https://i-blog.csdnimg.cn/blog_migrate/f656e363a14c15813e4787798d316642.png)
是不是 很神奇,老实讲小编在一开始也是兴奋的一晚上都睡不着,css的强大之处真是妙不可言,当然,如果还想再加点效果的话,我们可以再加上以下代码,让它可以真正的滚动起来。我们先定义一个动画名 rotate :
@keyframes rotate {from {}to { transform: rotate(-360deg); /*逆时针滚动360度 */ }}
然后在taiji 的原有样式上再使用这个动画,加上以下这句:
.taiji { animation: rotate 2s infinite linear; /*使用rotate动画,2秒钟*/}
OK,大功告成,大伙有没有学会,CSS就这么强大,就这么简单。