如何用CSS纯代码画一个旋转的太极图（附代码）
时间：2024/3/5作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到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纯代码画一个旋转的太极图（附代码）