如何用CSS纯代码画一个旋转的太极图(附代码)
程序员文章站
2022-03-28 08:14:39
...
这是一个中国人都非常熟悉的图案——太极图,它分为阴阳两级,会旋转(用到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纯代码画一个旋转的太极图(附代码)的详细内容,更多请关注其它相关文章!