这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由 若干个小圆组合而成，适合初学css3的人练练手，娱以 致学，增加学习的乐趣。
HTML部分：
CSS部分：
.square { width: 400px; height: 400px; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); animation: rotate infinite linear 5s; margin: 10% auto; -webkit-animation: rotate infinite linear 5s; margin: 10% auto; -moz-animation: rotate infinite linear 5s; margin: 10% auto; } .rect { width: 400px; height: 200px; position: relative; border: 1px #d2d2d2 solid; border-bottom: none; } .inner_circle { width: 200px; height: 200px; border-radius: 200px; position: absolute; z-index: 1; } .dot { width: 50px; height: 50px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50%; } .rect_one { border-radius: 200px 200px 0 0; background: white; } .rect_one_one { bottom: -100px; left: 0; background: black; } .rect_one_two { background: white; } .rect_two { border-radius: 0 0 200px 200px; background: black; } .rect_two_one { bottom: 100px; right: 0; background: white; } .rect_two_two { background: black; } @keyframes rotate { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); } }
看图看效果：
立即学习“前端免费学习笔记（深入）”；
以上就是如何用CSS纯代码画一个旋转的太极图（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611637.html
微信扫一扫 
支付宝扫一扫 
