CSS 画一个八卦 fix

本文主要是介绍CSS 画一个八卦 fix，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

https://blog.csdn.net/weixin_30500289/article/details/98463802

用作随机转盘也是不错的。

<style>
body{height: 100%;margin: 0 auto;}.bg_box{width: 100px;height: 200px;margin: 200px auto;background-color: white;border-color: black;border-style: solid;border-width: 2px 2px 2px 100px;border-radius: 100%;position: relative;animation: xuanzhuan 4s linear infinite;}.top-circle{position:absolute;left:-50px;top:0;height:100px;width:100px;text-align:center;line-height:100px;border-radius:100%;background:#000;}.bottom-circle{position:absolute;left:-50%;bottom:0;height:100px;width:100px;text-align:center;line-height:100px;border-radius:100%;background:#fff;}.small-circle{    position: absolute;display: inline-block;height: 25px;width: 25px;border-radius: 100%;margin: auto;top: 0;bottom: 0;}.white{background:#fff;}.black{background:#000;}@keyframes xuanzhuan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
</style><div class="bg_box"><div class="top-circle"><span class="small-circle white"></span></div><div class="bottom-circle"><span class="small-circle black"></span></div>
</div>   

这篇关于CSS 画一个八卦 fix的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---