1.e-card {
2 margin: 100px auto;
3 background: transparent;
4 box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
5 position: relative;
6 width: 240px;
7 height: 330px;
8 border-radius: 16px;
9 overflow: hidden;
10}
11
12.wave {
13 position: absolute;
14 width: 540px;
15 height: 700px;
16 opacity: 0.6;
17 left: 0;
18 top: 0;
19 margin-left: -50%;
20 margin-top: -70%;
21 background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
22}
23
24.icon {
25 width: 3em;
26 margin-top: -1em;
27 padding-bottom: 1em;
28}
29
30.infotop {
31 text-align: center;
32 font-size: 20px;
33 position: absolute;
34 top: 5.6em;
35 left: 0;
36 right: 0;
37 color: rgb(255, 255, 255);
38 font-weight: 600;
39}
40
41.name {
42 font-size: 14px;
43 font-weight: 100;
44 position: relative;
45 top: 1em;
46 text-transform: lowercase;
47}
48
49.wave:nth-child(2),
50.wave:nth-child(3) {
51 top: 210px;
52}
53
54.playing .wave {
55 border-radius: 40%;
56 animation: wave 3000ms infinite linear;
57}
58
59.wave {
60 border-radius: 40%;
61 animation: wave 55s infinite linear;
62}
63
64.playing .wave:nth-child(2) {
65 animation-duration: 4000ms;
66}
67
68.wave:nth-child(2) {
69 animation-duration: 50s;
70}
71
72.playing .wave:nth-child(3) {
73 animation-duration: 5000ms;
74}
75
76.wave:nth-child(3) {
77 animation-duration: 45s;
78}
79
80@keyframes wave {
81 0% {
82 transform: rotate(0deg);
83 }
84
85 100% {
86 transform: rotate(360deg);
87 }
88}
