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

今天咱们玩点别的~
制作一个太极~
效果就是下面这个样子的~
纯CSS3技术——制作一个旋转的太极
怎么样很帅吧~
嘿嘿~
首先还是分析一下如何实现这个图形,先来规划好位置~我们先来做一半,剩下的一半直接复制代码,修改一下参数就好了~
第一步:
首先由三个矩形,做好大致的骨架~
纯CSS3技术——制作一个旋转的太极
第二步:
修改样式(形状、背景色等等)。
纯CSS3技术——制作一个旋转的太极
(领会精神就好,这毕竟是个草图)
第三步:
完成另一半的制作并且添加动画效果。
纯CSS3技术——制作一个旋转的太极
这样我们的太极动画效果就完成了
是不是超级简单~
纯CSS3技术——制作一个旋转的太极
好的~现在我们开始动手操作吧~
先来规划一下图像的位置,(我们这边先设置一下border的值,方便我们观察,后面会清除掉的)
首先完成第一步
创建 div 标签
<body>
<divclass=“square”>
 <divclass=“rect rect_one”>
   <divclass=“inner_circle rect_one_one”>
     <divclass=“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:200px200px00;
 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技术——制作一个旋转的太极
那么我们的旋转太极就做好了
源代码已经贴在上面了
本站所有文章均来自互联网,如有侵权,请联系站长删除。极客文库 » 纯CSS3技术——制作一个旋转的太极
分享到:
赞(0)

评论抢沙发

评论前必须登录!