CSS3基础纯CSS制作旋转太极图阴阳鱼的简单步骤

纯CSS制作旋转太极图阴阳鱼的简单步骤

太极图是道教文化中的重要标志,简单的阴阳鱼图案展示了万物相生相克的哲理,本文主要分享用CSS制作旋转的太极图,新手朋友们可以通过本文复习关于CSS伪元素的使用,以及2D旋转和动画的使用,首先,在html里做如下布局:

<div id="taichi">
 <div class="tc1"></div>
 <div class="tc2"></div>
</div>

这里先将整体图案做成一个正圆形,并设置居中显示:

#taichi {
 width:400px;height:400px;margin:auto;
 position:absolute;left:0;right:0;top:0;bottom:0;
 border-radius:50%;
 overflow:hidden;
}

通过两个伪元素,制作左右两个相等的半圆:

#taichi:before {
 content:" ";
 width:200px;height:400px;
 position:absolute;right:0;
 background-color:#368;
}
#taichi:after {
 content:" ";
 width:200px;height:400px;
 position:absolute;
 background-color:#e78;
}

因为父元素设置了overflow:hidden超出隐藏,所以这里只需做两个长方形就行了,会被自动裁剪为半圆形:

CSS太极图.png

设置t1和t2两个子元素为两个小圆,分别定位到大圆的顶部和底部:

.tc1 {
 width:200px;height:200px;
 background-color:#e78;
 position:absolute;left:100px;
 border-radius:50%;
}
.tc2 {
 width:200px;height:200px;
 background-color:#368;
 position:absolute;top:200px;left:100px;
 border-radius:50%;z-index:2;
}

设置两个小圆的背景颜色分别为两个大半圆的背景颜色,这样便得到下面的图案:

CSS太极图2.png

通过伪元素给两个小圆的中心再分别放一个颜色相反的“更小的圆”:

.tc1:before {
 content:" ";
 width:80px;height:80px;
 position:absolute;top:60px;left:60px;
 background-color:#368;
 z-index:3;
 border-radius:50%;
}
.tc2:before {
 content:" ";
 width:80px;height:80px;
 position:absolute;bottom:60px;right:60px;
 background-color:#e78;
 z-index:3;
 border-radius:50%;
}

此时便得到下面的图案,太极图的标志基本就做好了:

CSS太极图3.png

接下来创建一个360度旋转的动画:

@keyframes spin {
  0% {transform:rotate(0deg)}
  50% {transform:rotate(180deg)}
  100% {transform:rotate(360deg)}
}

接下来给“大圆”应用这个动画,一个不停旋转的太极图就做好了。

#taichi {animation:spin 20s linear infinite;}

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/151.html