css波浪动画使用图片

参考：https://www.cnblogs.com/linjiangxian/p/11464753.html

素材如下： 

 

如果让美工设计，需要注意图片波浪的左右高度需要一致，不然对接处对不上，高低不一样。

效果如下：

 

代码如下：

只需要使用一张波浪纹图片，使用css来改变透明度即可

<div class="water-group">
	<div class="water water1" style="background-image: url('../../static/lang3.png')"></div>
	<div class="water water2" style="background-image: url('../../static/lang3.png')"></div>
	<div class="water water3" style="background-image: url('../../static/lang3.png')"></div>
</div>

 

.water-group {
		position: relative;
		height: 278rpx;
		width: 100%;
		overflow: hidden;
	}

	.water-group .water {
		position: absolute;
		width: 200%;
		height: 100%;
		background-size: 50% 100%;
	}

	.water-group .water1 {
		top: 0;
		left: -100%;
		opacity: 0.4;
		animation: water-right 7S infinite linear;
	}

	.water-group .water2 {
		top: 10px;
		left: 0;
		// opacity: 0.8;
		animation: water-left 8s infinite linear;
	}

	.water-group .water3 {
		top: 30px;
		left: -100%;
		animation: water-right 9s infinite linear;
	}

	@keyframes water-right {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(25%) translateZ(0) scaleY(0.85)
		}

		100% {
			transform: translateX(50%) translateZ(0) scaleY(1)
		}
	}

	@keyframes water-left {
		from {
			transform: translate(0%, 0px);
		}

		to {
			transform: translate(-50%, 0px);
		}
	}