如何用CSS纯代码画一个旋转的太极图（附代码）
时间：2024/10/27作者：未知来源：手揣网教程人气：
- [摘要]这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由 若干个小圆组合而成，适合初学css3的人练练手，娱以 ...这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由 若干个小圆组合而成，适合初学css3的人练练手，娱以 致学，增加学习的乐趣。
HTML部分：
<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 class="rect rect_two"> <div class="inner_circle rect_two_one"> <div class="dot rect_two_two"></div> </div> </div> </div> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div>CSS部分：
<style> .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); } } </style>看图看效果：
以上就是如何用CSS纯代码画一个旋转的太极图（附代码）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：如何用CSS纯代码画一个旋转的太极图（附代码）