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

2019-09-10 郑州网站建设  

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

纯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://tzchb.ieyo.com/dede/1590.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 一个
  • 效果
  • 制作
  • 下面
  • 这个
  • 太极
  • 就是