博客

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>