Project3/index.css at main · mdanylch/Project3 · GitHub

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
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
  background: #282c30;
  overflow: hidden;
}

body .air{
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .04;
  width: 100%;
  height: 100px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-size: 1000px 100px;
  scale: 2;
}
body .air.air1{
  animation: wave 30s linear infinite;
  z-index: 5;
  opacity: 0.03;
  animation-delay: 0s;
  bottom: 0;
}
body .air.air2{
  animation: wave2 25s linear infinite;
  z-index: 4;
  opacity: 0.02;
  animation-delay: -5s;
  bottom: 10px;
}
body .air.air3{
  animation: wave 40s linear infinite;
  z-index: 3;
  opacity: 0.007;
  animation-delay: -2s;
  bottom: 15px;
}
body .air.air4{
  animation: wave2 15s linear infinite;
  z-index: 2;
  opacity: 0.009;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: 1000px;
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: -1000px;
  }
}