CSS 画一个八卦 fix

画一个八卦 fix"/>

CSS 画一个八卦 fix

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

<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>