实例:加载动画
效果图:
实现过程:
1.正方形和三个小原围绕盒子中心点转动
用了一个div容器作为父元素用于定位,正方形和三个圆圈通过CSS中transform-origin属性确定了转动中心点,正方形定在左下角,三个圆圈转点则是定在自身之外
2.遮掩外围多余部分
将外围的div容器先转化为一个圆圈,后通过CSS中overflow属性隐藏多余部分
3.遮掩中心多余部分
通过一个div盒子作为圆圈蒙版层定位到容器中心,将中心部分遮掩
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简约CSS加载动画</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box1{
position: relative;
height: 100px;
width: 100px;
margin:0 auto;
margin-top: 30vh;
border-radius: 50%;
overflow: hidden;
}
.box1::before{
content: '';
position: absolute;
height: 50px;
width: 50px;
border-radius: 4px;
background-image: linear-gradient(to bottom right,#cde6ffda,#40a0ffda);
left: 50%;
bottom: 50%;
transform-origin: bottom left;
animation: zhuanquan 2s infinite;
}
.mengban{
position: absolute;
height: 87px;
width: 87px;
background-color: white;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.zhuan1,.zhuan2,.zhuan3{
position: absolute;
height: 6px;
width: 6px;
background-image: linear-gradient(to right,#cde6ffda,#40a0ffda);
border-radius: 50%;
}
.zhuan1{
left: 40px;
top: 1px;
transform-origin: 10px 49px;
animation: zhuanquan 2s cubic-bezier(0.3, 0, 0.3, 1.0) infinite;
}
.zhuan2{
left: 30px;
top: 4px;
transform-origin: 20px 46px;
animation: zhuanquan 2s cubic-bezier(0.4, 0, 0.4, 1.0) infinite;
}
.zhuan3{
left: 20px;
top:9px;
transform-origin: 30px 41px;
animation: zhuanquan 2s cubic-bezier(0.5, 0, 0.5, 1.0) infinite;
}
@keyframes zhuanquan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box1">
<div class="mengban"></div>
<div class="zhuan1"></div>
<div class="zhuan2"></div>
<div class="zhuan3"></div>
</div>
</body>
</html>