您的位置:首页 > Web前端 > CSS

纯CSS实现圆环渐变过渡加载动画

2019-04-09 12:00 176 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*旋转动画*/
@keyframes moveover {
0%   {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.box{
position:relative;
width:100px;
height:100px;
/*整体旋转*/
animation:moveover 3s linear infinite;
}
.box::before{
content:"";
position:absolute;
width: 50px;
height: 100px;
border-radius:50px 0 0 50px;
/* 起始最深颜色为 #999,过渡到中间颜色为 #d0cfcf */
background: linear-gradient(rgb(0, 60, 255), #7c90ff);
background-color: red;
z-index:2;
}
.box2{
position:absolute;
width: 50px;
height: 100px;
border-radius:0 50px 50px 0;
left:50%;
/* 过渡到中间颜色为 #d0cfcf 最终末尾颜色为 #eee */
background: linear-gradient(rgb(255, 255, 255),#7c90ff);
z-index:1;
}
.box::after{
content:"";
position:absolute;
width:92px;
height:92px;
top:4px;
left:4px;
border-radius:50%;
background-color: #fff;
z-index:2;
}
</style>
</head>
<body>
<div class='box'>
<div class="box2"></div>
</div>
</body>
</html>

原文地址

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: