html部分只需要一个大盒子和两个小盒子
<div class="warp"> <div class="left"></div> <div class="right"></div> </div>css样式部分
<style> .warp{ width: 200px; height: 100px; border-width:1px 1px 100px 1px ; border-style: solid; border-radius: 50%; margin: 100px auto; position: relative; /* 父级相对定位 */ } .left{ width: 20px; height: 20px; background-color: #fff; border: 40px solid #000; /* 边框属性 */ border-radius: 50%; /* 圆角属性 */ position: absolute;/*绝对定位 */ left: 0; top: 50%; } .right{ width: 20px; height: 20px; background-color: #000; border: 40px solid #fff; /* 边框属性 */ border-radius: 50%; /* 圆角属性 */ position: absolute;/*绝对定位 */ right: 0; top: 50%; }css3定义动画属性
@keyframes candy {/*css3定义动画属性*/ 0%{ transform: rotate(0deg); /* 旋转div元素 */ /* rotate 定义2d旋转 参数 规定旋转角度 */ } 100%{ transform: rotate(360deg); } }调用css3定义的动画属性
animation: candy 3s linear infinite; /* 调用动画名称 动画时间 运行轨迹 动画状态 */ /* linear 速度始终相同 */ /* ease 低速加速减速 ease-in从低速开始 ease-out从低速结束*/