水球加载动画
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)
两个视频的内容相同,第二个为转载
效果图
代码区
html
<div class="circle">
<div class="wave"></div>
</div>
CSS
body {
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
}
.circle {
position: absolute; /* 绝对定位 */
top: 50%; /* 距上部 */
left: 50%; /* 距左部 */
transform: translate(-50%, -50%); /* 移动X,Y */
width: 150px; /* 宽 */
height: 150px; /* 高 */
border: 5px solid #fff; /* 边框 */
box-shadow: 0 0 0 5px #4973ff; /* 盒子阴影: x,y,模糊,边框尺寸 */
border-radius: 50%; /* 边框圆角 */
overflow: hidden; /* 溢出隐藏 */
}
/* 水 */
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, .3); /*n内阴影 */
}
/* 形成双面的水波 */
.wave::before,
.wave::after {
content: ''; /* 内容 */
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
}
.wave::before {
border-radius: 45%;
background: rgba(255, 255, 255, 1);
animation: animate 5s linear infinite; /* 动画 */
}
.wave::after {
border-radius: 40%;
background: rgba(255, 255, 255, 0.5);
animation: animate 10s linear infinite;
}
@keyframes animate {
/* 通过修改y轴距离可以实现满加载 */
0% {
transform: translate(-50%, -70%) rotate(0deg);
}
100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
JS
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)