You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
8.1 KiB
97 lines
8.1 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title>WaterWaveAnimation</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: #839fc9;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
section .wave {
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAACBCAYAAACfMBctAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFDRDZFQUEyRDc3RTExRTk4MkQ4ODY4NTVCMjA5N0FCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFDRDZFQUEzRDc3RTExRTk4MkQ4ODY4NTVCMjA5N0FCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUNENkVBQTBENzdFMTFFOTgyRDg4Njg1NUIyMDk3QUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUNENkVBQTFENzdFMTFFOTgyRDg4Njg1NUIyMDk3QUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5SQPdtAAAPJUlEQVR42uzd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
|
||
|
|
background-size: 1000px 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
section .wave.wave1 {
|
||
|
|
animation: animate1 20s linear infinite;
|
||
|
|
z-index: 1000;
|
||
|
|
opacity: 1;
|
||
|
|
animation-delay: 0s;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
section .wave.wave2 {
|
||
|
|
animation: animate2 15s linear infinite;
|
||
|
|
z-index: 999;
|
||
|
|
opacity: 0.5;
|
||
|
|
animation-delay: -5s;
|
||
|
|
bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
section .wave.wave3 {
|
||
|
|
animation: animate1 10s linear infinite;
|
||
|
|
z-index: 998;
|
||
|
|
opacity: 0.2;
|
||
|
|
animation-delay: -7s;
|
||
|
|
bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
section .wave.wave4 {
|
||
|
|
animation: animate2 2s linear infinite;
|
||
|
|
z-index: 997;
|
||
|
|
opacity: 0.71;
|
||
|
|
animation-delay: -5s;
|
||
|
|
bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animate1 {
|
||
|
|
0% {
|
||
|
|
background-position-x: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position-x: 1000px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animate2 {
|
||
|
|
0% {
|
||
|
|
background-position-x: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position-x: -1000px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<section>
|
||
|
|
<div class="wave wave1"></div>
|
||
|
|
<div class="wave wave2"></div>
|
||
|
|
<div class="wave wave3"></div>
|
||
|
|
<div class="wave wave4"></div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|