-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathwavev2.html
73 lines (69 loc) · 1.14 KB
/
wavev2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin:0px;
}
.holdtheholdtheocean {
transform:scaleY(0.5);
}
.holdtheocean {
position:relative;
overflow:hidden;
width:100%;
height:210px;
margin:-52.5px 0;
}
.ocean {
height:5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(/assets/img/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
</style>
</head>
<body>
<div class="holdtheholdtheocean">
<div class="holdtheocean">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
</body>
</html>