daysofcode/2019/30/day-34/day-34.css at master · w3dotdev/daysofcode · 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
[class^="leaf"] {
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0%  50%;
}

[class^="leaf"]:after {
  animation-name: _opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: #c522ca;
  border-radius: 0 100% 0 100%;
  border: 1px solid #8a156d;
  content: " ";
  height: 100px;
  opacity: 0;
  position: absolute;
  left: calc(100% / 2);
  top: -50px;
  width: 50px;
}

[class^="leaf-1"]:after { animation-duration: 10s; animation-delay: 1s; }
[class^="leaf-2"]:after { animation-duration: 10s; animation-delay: 2s; }
[class^="leaf-3"]:after { animation-duration: 10s; animation-delay: 3s; }
[class^="leaf-4"]:after { animation-duration: 10s; animation-delay: 4s; }
[class^="leaf-5"]:after { animation-duration: 10s; animation-delay: 5s; }
[class^="leaf-6"]:after { animation-duration: 10s; animation-delay: 6s; }
[class^="leaf-7"]:after { animation-duration: 10s; animation-delay: 7s; }
[class^="leaf-8"]:after { animation-duration: 10s; animation-delay: 8s; }
[class^="leaf-9"]:after { animation-duration: 10s; animation-delay: 9s; }
[class^="leaf-10"]:after { animation-duration: 10s; animation-delay: 10s; }

@keyframes _opacity {
  0% { opacity: 0; }
  50% { opacity: 1; }
}