<!--外部容器--> <div class="container"> <!-- 动画容器--> <div class="box"> <!-- 外--> <i></i> <!-- 内--> <i></i> </div> <!-- 文字--> <span>加载中...</span> </div>
<style type="text/css"> /*外部容器样式*/ .container{ width: 300px; height: 300px; background-color: #99999952; border: 1px solid #999; margin: 40px auto; font-size: 10px; /*内部元素居中*/ flex-direction: column; display: flex; justify-content: center; align-items: center; } /*动画元素容器样式*/ .box{ width: 100px; height: 100px; position: relative; } /*动画元素样式*/ .box > i{ display: block; border: 2px solid #333; position: absolute; border-radius: 50%; } /*动画:旋转180度缩放0.6倍*/ @keyframes anim { 0%{ transform: rotate(0) scale(1); } 50%{ transform: rotate(180deg) scale(0.6); } 100%{ transform: rotate(360deg) scale(1); } } /*两个动画元素各自的样式*/ .box i:nth-child(1){ width: 60px; height: 60px; left: 20px; top: 20px; /*transparent为透明*/ border-color:transparent #FF386D; animation: anim 1s infinite 0s ease-in-out; } .box i:nth-child(2){ width: 20px; height: 20px; left: 40px; top: 40px; border-color: transparent #00C3FF; /*reverse反向 调用动画*/ animation: anim 1s infinite 0.5s ease-in-out reverse; } </style>
这是一个纯CSS的曲线旋转loading动画