Notification by yaroslavas2001

This notification was created for CSS Game UI Challenge

#e8e8e8

1.notification {
2  height: 12em;
3  width: 19em;
4}
5
6.mirrow {
7  height: 12em;
8  width: 19em;
9  position: relative;
10  background: linear-gradient(45deg, #6720D9, #0062FF, #0085FF, #009CFF, #00AED3, #00BD9B);
11  background-size: 400% 400%;
12  animation: gradient 15s ease infinite;
13}
14
15.fragment {
16  position: absolute;
17  filter: blur(5px);
18  fill: rgba(252, 252, 252, 0.7);
19  transition: all 2s ease-in-out;
20}
21
22.mirrow:hover .fragment {
23  height: 0em;
24  width: 0em;
25  filter: blur(10px);
26}
27
28.fragment1 {
29  width: 9.5em;
30  height: 7.5em;
31}
32
33.mirrow:hover .fragment1 {
34  transform: translate(-15px, -15px);
35}
36
37.fragment2 {
38  width: 8em;
39  height: 6.5em;
40  bottom: 0px;
41  left: 0px;
42}
43
44.mirrow:hover .fragment2 {
45  transform: translate(-15px, 15px);
46}
47
48.fragment3 {
49  width: 7em;
50  height: 7em;
51  top: 0px;
52  right: 25%;
53  left: 40%;
54}
55
56.mirrow:hover .fragment3 {
57  transform: translate(0px, -15px);
58}
59
60.fragment4 {
61  width: 8em;
62  height: 7em;
63  top: 0px;
64  right: 0px
65}
66
67.mirrow:hover .fragment4 {
68  transform: translate(15px, -15px);
69}
70
71.fragment5 {
72  width: 12em;
73  height: 6em;
74  bottom: 0px;
75  right: 0px;
76}
77
78.mirrow:hover .fragment5 {
79  transform: translate(15px, 15px);
80}
81
82.level {
83  display: flex;
84  flex-direction: column;
85  justify-content: center;
86  align-items: center;
87  height: 100%;
88}
89
90.btn_block {
91  display: flex;
92}
93
94.level_text {
95  font-weight: bold;
96  font-size: 22px;
97  color: #fff;
98  margin: 0px 0px 5px 0px;
99}
100
101.level_sub_text {
102  font-size: 13px;
103  color: #fff;
104  margin: 0px 0px 10px 0px;
105}
106
107.btn {
108  background: transparent;
109  border: 1px solid #fff;
110  border-radius: 14px;
111  cursor: pointer;
112  margin: 0px 2px;
113  color: #fff;
114  font-size: 12px;
115  transition: all 1s ease-in-out;
116  padding: 2px 6px;
117}
118
119.btn:hover {
120  background: #fff;
121  color: #000;
122}
123
124@keyframes gradient {
125  0% {
126    background-position: 0% 50%;
127  }
128
129  50% {
130    background-position: 100% 50%;
131  }
132
133  100% {
134    background-position: 0% 50%;
135  }
136}
137
138.star {
139  position: absolute;
140  height: 28px;
141  width: 28px;
142  fill: yellow;
143}
144
145.star1 {
146  animation: Orbita1 15s linear infinite;
147}
148
149@keyframes Orbita1 {
150  from {
151    transform: rotate(0deg) translateX(80px) rotate(0deg);
152  }
153
154  to {
155    transform: rotate(360deg) translateX(80px) rotate(-360deg);
156  }
157}
158
159.star2 {
160  animation: Orbita2 15s linear infinite;
161}
162
163@keyframes Orbita2 {
164  from {
165    transform: rotate(50deg) translateX(80px) rotate(50deg);
166  }
167
168  to {
169    transform: rotate(410deg) translateX(80px) rotate(-410deg);
170  }
171}
172
173.star3 {
174  animation: Orbita3 15s linear infinite;
175}
176
177@keyframes Orbita3 {
178  from {
179    transform: rotate(100deg) translateX(80px) rotate(100deg);
180  }
181
182  to {
183    transform: rotate(460deg) translateX(80px) rotate(-460deg);
184  }
185}
186
187.star4 {
188  animation: Orbita4 15s linear infinite;
189}
190
191@keyframes Orbita4 {
192  from {
193    transform: rotate(150deg) translateX(80px) rotate(150deg);
194  }
195
196  to {
197    transform: rotate(510deg) translateX(80px) rotate(-510deg);
198  }
199}
200
201.star5 {
202  animation: Orbita5 15s linear infinite;
203}
204
205@keyframes Orbita5 {
206  from {
207    transform: rotate(200deg) translateX(80px) rotate(200deg);
208  }
209
210  to {
211    transform: rotate(560deg) translateX(80px) rotate(-560deg);
212  }
213}
214
215.star6 {
216  animation: Orbita6 15s linear infinite;
217}
218
219@keyframes Orbita6 {
220  from {
221    transform: rotate(250deg) translateX(80px) rotate(250deg);
222  }
223
224  to {
225    transform: rotate(610deg) translateX(80px) rotate(-610deg);
226  }
227}
228
229.star7 {
230  animation: Orbita7 15s linear infinite;
231}
232
233@keyframes Orbita7 {
234  from {
235    transform: rotate(310deg) translateX(80px) rotate(310deg);
236  }
237
238  to {
239    transform: rotate(670deg) translateX(80px) rotate(-670deg);
240  }
241}

.notification {
  height: 12em;
  width: 19em;
}

.mirrow {
  height: 12em;
  width: 19em;
  position: relative;
  background: linear-gradient(45deg, #6720D9, #0062FF, #0085FF, #009CFF, #00AED3, #00BD9B);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.fragment {
  position: absolute;
  filter: blur(5px);
  fill: rgba(252, 252, 252, 0.7);
  transition: all 2s ease-in-out;
}

.mirrow:hover .fragment {
  height: 0em;
  width: 0em;
  filter: blur(10px);
}

.fragment1 {
  width: 9.5em;
  height: 7.5em;
}

.mirrow:hover .fragment1 {
  transform: translate(-15px, -15px);
}

.fragment2 {
  width: 8em;
  height: 6.5em;
  bottom: 0px;
  left: 0px;
}

.mirrow:hover .fragment2 {
  transform: translate(-15px, 15px);
}

.fragment3 {
  width: 7em;
  height: 7em;
  top: 0px;
  right: 25%;
  left: 40%;
}

.mirrow:hover .fragment3 {
  transform: translate(0px, -15px);
}

.fragment4 {
  width: 8em;
  height: 7em;
  top: 0px;
  right: 0px
}

.mirrow:hover .fragment4 {
  transform: translate(15px, -15px);
}

.fragment5 {
  width: 12em;
  height: 6em;
  bottom: 0px;
  right: 0px;
}

.mirrow:hover .fragment5 {
  transform: translate(15px, 15px);
}

.level {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn_block {
  display: flex;
}

.level_text {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  margin: 0px 0px 5px 0px;
}

.level_sub_text {
  font-size: 13px;
  color: #fff;
  margin: 0px 0px 10px 0px;
}

.btn {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 14px;
  cursor: pointer;
  margin: 0px 2px;
  color: #fff;
  font-size: 12px;
  transition: all 1s ease-in-out;
  padding: 2px 6px;
}

.btn:hover {
  background: #fff;
  color: #000;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.star {
  position: absolute;
  height: 28px;
  width: 28px;
  fill: yellow;
}

.star1 {
  animation: Orbita1 15s linear infinite;
}

@keyframes Orbita1 {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

.star2 {
  animation: Orbita2 15s linear infinite;
}

@keyframes Orbita2 {
  from {
    transform: rotate(50deg) translateX(80px) rotate(50deg);
  }

  to {
    transform: rotate(410deg) translateX(80px) rotate(-410deg);
  }
}

.star3 {
  animation: Orbita3 15s linear infinite;
}

@keyframes Orbita3 {
  from {
    transform: rotate(100deg) translateX(80px) rotate(100deg);
  }

  to {
    transform: rotate(460deg) translateX(80px) rotate(-460deg);
  }
}

.star4 {
  animation: Orbita4 15s linear infinite;
}

@keyframes Orbita4 {
  from {
    transform: rotate(150deg) translateX(80px) rotate(150deg);
  }

  to {
    transform: rotate(510deg) translateX(80px) rotate(-510deg);
  }
}

.star5 {
  animation: Orbita5 15s linear infinite;
}

@keyframes Orbita5 {
  from {
    transform: rotate(200deg) translateX(80px) rotate(200deg);
  }

  to {
    transform: rotate(560deg) translateX(80px) rotate(-560deg);
  }
}

.star6 {
  animation: Orbita6 15s linear infinite;
}

@keyframes Orbita6 {
  from {
    transform: rotate(250deg) translateX(80px) rotate(250deg);
  }

  to {
    transform: rotate(610deg) translateX(80px) rotate(-610deg);
  }
}

.star7 {
  animation: Orbita7 15s linear infinite;
}

@keyframes Orbita7 {
  from {
    transform: rotate(310deg) translateX(80px) rotate(310deg);
  }

  to {
    transform: rotate(670deg) translateX(80px) rotate(-670deg);
  }
}

Toggle prefixes

560 views

Copy to Figma

560 views

Comments

No variations yet

MIT License

Copyright - 2024 yaroslavas2001 (Iaroslava) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.