在小程序里,能用纯css解决的,就不要用链接图片,很尴尬的,
吐槽一下
效果
代码解读
定义 dom,容器中包含4条波浪特效的 <view>
:
<view class="wave-div">
<view class="wave"></view>
<view class="wave"></view>
<view class="wave one"></view>
<view class="wave one"></view>
<view class="wave two"></view>
<view class="wave two"></view>
<view class="wave three"></view>
<view class="wave three"></view>
</view>
设置容器样式:
.wave-div {
padding-top: 320rpx;
position: relative;
width: 750rpx;
height: 50rpx;
background-color: #464646;
overflow: hidden;
}
制作海浪动画效果:
.wave-div .wave {
position: absolute;
top: 320rpx;
left: -400rpx;
width: 1000rpx;
height: 1000rpx;
background: #8a8a8a;
border-radius: 43%;
filter: opacity(0.4);
animation: drift linear infinite;
}
.wave-div .wave.one {
left: -150rpx;
}
.wave-div .wave.two {
left: 0rpx;
}
.wave-div .wave.three {
left: 150rpx;
}
.wave-div .wave:nth-of-type(3n+1) {
animation-duration: 5s;
}
.wave-div .wave:nth-of-type(3n+2) {
animation-duration: 9s;
}
@keyframes drift {
from {
transform: rotate(360deg);
}
}
加大海浪的波动幅度,增加颜色差异:
.wave-div .wave {
transform-origin: 50% 48%;
}
.wave-div .wave:nth-of-type(3n+2) {
background-color: #d0d0d0;
filter: opacity(0.1);
}
最后,隐藏容器外的内容:
.wave-div {
overflow: hidden;
}
大功告成!