ufologist/wave-animation.html

## wave-animation.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wave animation | 波浪动画</title>
    <style>
        .banner-box {
            position: relative;
        }
        .banner {
            background: url(http://lorempixel.com/400/200/nature);
            height: 200px;
        }

        .wave-box {
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .wave-item {
            position: absolute;
            bottom: 0;
            width: 400%;
            background-repeat: repeat-x;
        }
        .wave-item--1 {
            left: -236px;
            z-index: 2;
            height: 85px;
            /* http://img1.sj.qq.com/res/sj.qq.com/official2/images/index/wave1.png */
            background-image: url("data:image/png;base64,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");
            animation: wave1 25s linear .4s infinite normal;
        }
        .wave-item--2 {
            z-index: 1;
            height: 100px;
            /* http://img1.sj.qq.com/res/sj.qq.com/official2/images/index/wave2.png */
            background-image: url("data:image/png;base64,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");
            animation: wave2 60s linear .4s infinite normal;
        }
        @keyframes wave1 {
            from {
                left: -236px;
            }

            to {
                left: -1233px;
            }
        }
        @keyframes wave2 {
            from {
                left: 0;
            }

            to {
                left: -1009px;
            }
        }
    </style>
</head>
<body>
    <div class="banner-box">
        <div class="banner"></div>
        <div class="wave-box">
            <div class="wave-item wave-item--1"></div>
            <div class="wave-item wave-item--2"></div>
        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>wave animation \| 波浪动画</title>
	<style>
	.banner-box {
	position: relative;
	}
	.banner {
	background: url(http://lorempixel.com/400/200/nature);
	height: 200px;
	}

	.wave-box {
	position: absolute;
	bottom: 0;
	width: 100%;
	}
	.wave-item {
	position: absolute;
	bottom: 0;
	width: 400%;
	background-repeat: repeat-x;
	}
	.wave-item--1 {
	left: -236px;
	z-index: 2;
	height: 85px;
	/* http://img1.sj.qq.com/res/sj.qq.com/official2/images/index/wave1.png */
	background-image: url("data:image/png;base64,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");
	animation: wave1 25s linear .4s infinite normal;
	}
	.wave-item--2 {
	z-index: 1;
	height: 100px;
	/* http://img1.sj.qq.com/res/sj.qq.com/official2/images/index/wave2.png */
	background-image: url("data:image/png;base64,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");
	animation: wave2 60s linear .4s infinite normal;
	}
	@keyframes wave1 {
	from {
	left: -236px;
	}

	to {
	left: -1233px;
	}
	}
	@keyframes wave2 {
	from {
	left: 0;
	}

	to {
	left: -1009px;
	}
	}
	</style>
	</head>
	<body>
	<div class="banner-box">
	<div class="banner"></div>
	<div class="wave-box">
	<div class="wave-item wave-item--1"></div>
	<div class="wave-item wave-item--2"></div>
	</div>
	</div>
	</body>
	</html>