实际效果比录制的更流畅平滑。
实现思路。
- 最上层的图片,3是镂空的,这有一些透明和半透明渐变的效果。
- 下边的波浪,是有3个不同颜色圆角矩形,通过animation动画实现转动,每个动画的时间不一样,产生了不规则的波浪效果。
不多说,贴代码
html部分
<div class="number">
<div class="img"></div>
<div class="wave">
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
</div>
</div>
CSS部分
.number {
overflow: hidden;
position: relative;
width : 385px;
height : 434px;
}
.img {
position : absolute;
width : 385px;
height : 434px;
z-index : 99;
top : 0;
left : 0;
background: url(images/3.png) no-repeat center center;
}
.wave {
position: relative;
}
.wave div {
position : absolute;
top : 136px;
left : 50%;
width : 500px;
height : 500px;
margin-left : -250px;
border-radius: 40%;
}
.w1 {
background: #ffef43;
opacity : 0.4;
animation : drift 4s infinite linear;
}
.w2 {
background: #ffbed3;
opacity : 0.6;
animation : drift 6s infinite linear;
}
.w3 {
background: #ff46c9;
opacity : 0.4;
animation : drift 5s infinite linear;
}
@keyframes drift {
from {
-webkit-transform: rotate(0deg);
transform : rotate(0deg);
}
from {
-webkit-transform: rotate(360deg);
transform : rotate(360deg);
}
}```