加载中动画
利用的是边框切圆
<style>
.box {
width: 80px; height: 60px;
margin: 200px;
padding: 80px 150px;
position: relative;
}
.box div {
width: 80px; height: 80px;
border-radius: 50%;
/*background: blue;*/
border: 5px solid rgba(255, 255, 255, 0.5);
position: absolute;
border-top: 5px solid rgba(255, 255, 255, 1);
animation: rotate 1.3s infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
