小程序css特效
2019-07-04 本文已影响0人
白菜_37e2
这里有两个特效，如何把图片变成水波浪一样在跳动着
.wave-bg {
z-index: 1;
animation: wave-bg 10.25s linear infinite;
}
@keyframes wave {
from {
transform: translate3d(125rpx, 0, 0);
}
to {
transform: translate3d(1125rpx, 0, 0);
}
}
.wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite;}
@keyframes wave { from { transform: translate3d(125rpx, 0, 0); } to { transform: translate3d(1125rpx, 0, 0); }}
<view class="hd" > <image class="logo" src="/image/wtzs.png" mode="widthFix"></image> <image class="wave" src="/image/wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="/image/wave.png" mode="aspectFill"></image> </view>
