• 近期将进行后台系统升级,如有访问不畅,请稍后再试!
  • 极客文库-知识库上线!
  • 极客文库小编@勤劳的小蚂蚁,为您推荐每日资讯,欢迎关注!
  • 每日更新优质编程文章!
  • 更多功能模块开发中。。。

纯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>
页面效果:
现在调整图形的形状和背景颜色
代码:
.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;
}
页面效果:
现在我们努努力把另一半也做出来~(复制上面的代码和样式,修改部分参数,把我们做的辅助线清除掉)
现在就是重要的一步了,给它添加一个动画~
代码:
.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);
}
现在我们来回顾一下制作太极的全过程~
那么我们的旋转太极就做好了
源代码已经贴在上面了

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:纯 CSS3 技术——制作一个旋转的太极
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

欢迎 注册账号 登录 发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00