Just learn to the taiji diagram of HTML code-CodePudding

The code

<meta charset="utf-8" & gt;
The production of taiji diagram & lt;/title> <br/><style type="text/CSS" & gt; <br/>The taiji {position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #fff; border:solid 1px #ccc; animation: spin 6s linear infinite;/* animation set */} <br/>. Tj_1 {position: absolute; top: 0px; width: 50%; height: 100%; } <br/>. Tj_big1 {left: 0 px; border-radius:100% 0 0 100%/50% 0 0 50%; background: #000; } <br/>. Tj_big2 {right: 0 px; Border - the radius: 0/0 0 100% 100% 50% 50% 0; background: #fff; } <br/>. Tj_2 {position: absolute; width: 50%; height: 50%; left: 25%; border-radius: 50%; } <br/>. Tj_s1 {bottom: 0 px; background: #fff; } <br/>. Tj_s2 {top: 0 px; background: #000; } <br/>. Tj_ss {position: absolute; width: 25%; Height: 25%; Left: 37.5%; border-radius: 50%; } <br/>. Tj_w {top: 37.5%; background: #000; } <br/>. Tj_b {top: 37.5%; background: #fff; } <br/>/* */animation method <br/>@ keyframes spin {<br/>{<br/> 0%transform:rotate(0deg); <br/>} <br/>{<br/> 100%transform:rotate(360deg); <br/>} <br/>} <br/></style> <br/></head> <br/><body> <br/><br/><Div & gt; <br/><Div & gt; </div> <br/><Div & gt; </div> <br/><Div & gt; <br/><Div & gt; </div> <br/></div> <br/><Div & gt; <br/><Div & gt; </div> <br/></div> <br/><br/></div> <br/></body> <br/></html> <br/><br/><img SRC="https://img.codepudding.com/202009/97217230754531.png" Alt=""/><p class="article - content rp"> CodePudding user response: </p>Thanks for sharing, <br/>Here is used, it is recommended that you sent to HTML edition piece or your own personal blog, <img SRC="https://img.codepudding.com/202009/97217230754532.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>(? Omega? Hiahiahia <br/>I am a newcomer <br/>Don't understand (=_=) <br/>Thank you for reminding me, </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/database/23565.html" target="_blank" style="color:#999">https//www.codepudding.com/database/23565.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/database/23564.html'>Multiple source files pagoda built</a></div> <div class="detail-arr-right">Next:<a href='/database/23566.html'>What is software engineering service of science and engineering?</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=The+base+class' target='_blank'>The base class</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>