<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
body{
background: #000000;
margin: 100px;
}
.load{
text-indent: -9999px;
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 16px #6ef;
border-radius: 50%;
} //创建圆形
.load::before{
position: absolute;
content: '';
width: 101px;
height: 202px;
/*background: #ff88c2;*/
background: #000000;
left: 101px;
border-radius: 0 202px 202px 0;
animation: load 1s infinite;
transform-origin: 0px 101px;
} //在圆形之前
.load::after{
position: absolute;
content: '';
width: 202px;
height: 202px;
/*background: red;*/
border-radius: 50%;
left: 0;
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.3);
} //在圆形之后
@keyframes load{
0%{transform: rotate(0deg);}
/*50%{transform: rotate(180deg);}*/
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="load">
</div>
</body>
</html>Css3-load动画
最新推荐文章于 2022-12-13 15:08:10 发布
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
