1.notification {
2  width: 250px;
3  height: 60px;
4  background: rgb(255, 255, 255);
5  border-radius: 14px;
6  position: relative;
7  border: 1px solid rgba(0, 0, 0, 0.377);
8}
9
10.shinner {
11  position: absolute;
12  width: 250px;
13  height: 60px;
14  overflow: hidden;
15  top: 0;
16  left: 0;
17  border-radius: 0.5rem;
18}
19
20.mover {
21  position: absolute;
22  border-top: 60px solid rgba(255, 255, 255, 0.4);
23  border-right: 30px solid transparent;
24  left: 50px;
25  filter: blur( 4px );
26  animation: shine 2s infinite ease-in-out;
27}
28
29.mover2 {
30  content: "";
31  position: absolute;
32  border-top: 60px solid rgba(255, 255, 255, 0.4);
33  border-left: 30px solid transparent;
34  transform: scaleY(-1);
35  left: 20px;
36  filter: blur( 4px );
37  animation: shine2 2s infinite ease-in-out;
38}
39
40.levelup {
41  color: rgb(18, 175, 4);
42  text-align: center;
43  padding-top: 0.6rem;
44  font-weight: bolder;
45  font-size: 1.8rem;
46  z-index: 3;
47}
48
49.congrats {
50  font-family: cursive;
51  font-size: 1.5rem;
52  color: rgb(240, 240, 240);
53  text-align: center;
54  padding-top: 1rem;
55  text-shadow: 1px 4px 7px rgb(7, 7, 7);
56}
57
58.wing {
59  transform: translate(150px,-100px);
60  position: absolute;
61  z-index: -1;
62  animation: winganime 2s ease-in-out infinite;
63}
64
65.wing1 {
66  transform: translate(-30px,-100px) scaleX(-1);
67  position: absolute;
68  z-index: -1;
69  animation: winganime2 2s ease-in-out infinite;
70}
71
72.bg {
73  background: rgb(223, 223, 105);
74  width: 130px;
75  height: 130px;
76  position: absolute;
77  top: 50%;
78  right: 50%;
79  transform: translate(50%,-50%);
80  z-index: -2;
81  border-radius: 50%;
82  box-shadow: rgb(252, 255, 54,0.7) 0px 4px 105px, rgb(252, 255, 54,0.7) 0px -24px 130px, rgb(252, 255, 54,0.7) 0px 4px 446px, rgb(252, 255, 54,0.7) 0px 12px 13px, rgb(252, 255, 54,0.7) 0px -3px 5px;
83  animation: rot 2.5s infinite ease-in-out;
84  transform-origin: center;
85}
86
87@keyframes rot {
88  0% {
89    transform: translate(50%,-50%) rotate(0deg);
90  }
91
92  100% {
93    transform: translate(50%,-50%) rotate(360deg);
94  }
95}
96
97@keyframes winganime {
98  0% {
99    transform: translate(150px,-100px) rotateY(0deg);
100  }
101
102  50% {
103    transform: translate(150px,-95px) rotateY(25deg);
104  }
105
106  100% {
107    transform: translate(150px,-100px) rotateY(0deg);
108  }
109}
110
111@keyframes winganime2 {
112  0% {
113    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
114  }
115
116  50% {
117    transform: translate(-30px,-95px) rotateY(-25deg) scaleX(-1);
118  }
119
120  100% {
121    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
122  }
123}
124
125@keyframes shine {
126  0% {
127    left: -50px;
128  }
129
130  100% {
131    left: 300px;
132  }
133}
134
135@keyframes shine2 {
136  0% {
137    left: -20px;
138  }
139
140  100% {
141    left: 270px;
142  }
143}