波纹效果
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)
两个视频的内容相同,第二个为转载
效果图
代码区
html
<div class="container">
<span class="ripple r1"></span>
<span class="ripple r2"></span>
<span class="ripple r3"></span>
<span class="ripple r4"></span>
<span class="ripple r5"></span>
<span class="ripple r6"></span>
</div>
CSS
body{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
background: #3498db; /* 背景颜色 */
}
.container{
position: absolute; /* 绝对定位 */
top: 50%; /* 距上部 */
left: 50%; /* 距左部 */
transform: translate(-50%,-50%) rotateX(70deg); /* 移动,X轴旋转 */
}
.ripple{
position: fixed; /* 视窗定位 */
top: 0;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: ripple 4s linear infinite; /* 动画:名称 时间 速率 重复 */
}
.r2{
/* 延迟时间实现 */
animation-delay: 0.8s;
}
.r3{
animation-delay: 1.6s;
}
.r4{
animation-delay: 2.4s;
}
.r5{
animation-delay: 3.2s;
}
.r6{
animation-delay: 4s;
}
@keyframes ripple {
from{
border: 4px solid #8e44ad;
background: #9b59b670;
}
to{
border: 0px solid #8e44ad;
background: #9b59b670;
width: 400px;
height: 400px;
top: 20px;
opacity: 0; /* 透明度 */
}
}
JS
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)