欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

纯CSS3技术——制作一个旋转的太极

 制作一个太极

效果就是下面这个样子的:

纯CSS3技术——制作一个旋转的太极

 

怎么样很帅吧~

嘿嘿~

首先还是分析一下如何实现这个图形,先来规划好位置~我们先来做一半,剩下的一半直接复制代码,修改一下参数就好了~

第一步:

首先由三个矩形,做好大致的骨架~

纯CSS3技术——制作一个旋转的太极

 

第二步:

修改样式(形状、背景色等等)。

纯CSS3技术——制作一个旋转的太极

 

(领会精神就好,这毕竟是个草图)

第三步:

完成另一半的制作并且添加动画效果。

纯CSS3技术——制作一个旋转的太极

 

这样我们的太极动画效果就完成了

是不是超级简单~

 

好的~现在我们开始动手操作吧~

先来规划一下图像的位置,(我们这边先设置一下border的值,方便我们观察,后面会清除掉的)

首先完成第一步

创建 div 标签

<body><div
 class="square"> <div class="rect rect_one"> <div 
class="inner_circle rect_one_one"> <div class="dot 
rect_one_two"></div> </div> 
</div></div></body>

样式代码:

<style>*{
 margin: 0; padding: 0; }body { width: 100vw; height: 100vh; overflow: 
hidden;}.square{ width:400px; height:400px; position:relative;  
margin:10% auto; border:1px #d2d2d2 solid;}.rect{ width:400px; 
height:200px; position:relative; border:1px #d2d2d2 
solid;}.inner_circle{ width:200px; height:200px; position:absolute; 
z-index:1; border:1px #d2d2d2 solid;}.dot{ width:50px; height:50px; 
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 
border:1px #d2d2d2 solid;}.rect_one_one{ bottom:-100px; 
right:0;}</style>

页面效果:

纯CSS3技术——制作一个旋转的太极

 

现在调整图形的形状和背景颜色

代码:

.inner_circle{
 width:200px; height:200px; border-radius:200px; position:absolute; 
z-index:1; border:1px #d2d2d2 solid;}.dot{ width:50px; height:50px; 
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 
border-radius:50%; border:1px #d2d2d2 solid;}.rect_one{ 
border-radius:200px 200px 0 0; background:black;}.rect_one_one{ 
bottom:-100px; right:0; background:black;}.rect_one_two{ 
background:white;}

页面效果:

纯CSS3技术——制作一个旋转的太极

 

现在我们努努力把另一半也做出来~(复制上面的代码和样式,修改部分参数,把我们做的辅助线清除掉)

纯CSS3技术——制作一个旋转的太极

 

现在就是重要的一步了,给它添加一个动画~

代码:

.square{
 width:400px; height:400px; position:relative;  margin:10% auto;   
animation:rotate infinite linear 5s; -webkit-animation:rotate infinite 
linear 5s; -moz-animation:rotate infinite linear 5s;}
@keyframes
 rotate{ from{ transform:rotate(0deg); -webkit-transform:rotate(0deg); 
}to{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}

现在我们来回顾一下制作太极的全过程~

纯CSS3技术——制作一个旋转的太极

 

那么我们的旋转太极就做好了

源代码已经贴在上面了

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c50758.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:35 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。