송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
3cde542e 1 parent beea3469

2/1

Inline Side-by-side
Showing 9 changed files with 452 additions and 220 deletions
1 +{
2 + "liveServer.settings.port": 5501
3 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -177,4 +177,83 @@ body { ...@@ -177,4 +177,83 @@ body {
177 background-repeat: no-repeat; 177 background-repeat: no-repeat;
178 } 178 }
179 /* 그라디언트 배경 */ 179 /* 그라디언트 배경 */
180 -
...\ No newline at end of file ...\ No newline at end of file
180 +
181 +/* text fade in */
182 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
183 +
184 +.animated{
185 + -webkit-animation-fill-mode:both;
186 + -webkit-animation-duration:2s;
187 + animation-duration:2s;
188 +}
189 +.animated2{
190 + animation-delay:.5s;
191 + -webkit-animation-delay:.5s;
192 + -webkit-animation-fill-mode:both;
193 + -webkit-animation-duration:2s;
194 + animation-duration:2s;
195 +}
196 +@-webkit-keyframes fadeOutUp {
197 + 0% {
198 + opacity: 0;
199 + -webkit-transform: translateY(1);
200 + -webkit-transform: translateY(40px);
201 + } 100% {
202 + opacity: 1;
203 + }
204 +}
205 +
206 +.fadeOutUp {
207 + -webkit-animation-name: fadeOutUp;
208 + animation-name: fadeOutUp;
209 +}
210 +
211 +.fadeIn {
212 + -webkit-animation-name: fadeIn;
213 + animation-name: fadeIn;
214 +}
215 +
216 +@-webkit-keyframes fadeIn {
217 + 0%{
218 + opacity: 0;
219 + -webkit-transform: translateY(1);
220 + -webkit-transform: translateY(40px);
221 + }
222 + 100% {
223 + opacity: 1;
224 + }
225 +}
226 +/* text fade in */
227 +
228 +
229 +
230 +
231 +
232 +
233 +/* 텍스트 */
234 +#p1 {
235 + font-size: 50px;
236 + color: rgb(0, 0, 0);
237 + font-family: Noto Sans KR;
238 + text-align: center;
239 +}
240 +#p2{
241 + font-size: 20px;
242 + color: rgb(0, 0, 0);
243 + font-family: Noto Sans KR;
244 + text-align: center;
245 +}
246 +#p3{
247 + font-size: 15px;
248 + color: rgb(0, 0, 0);
249 + font-family: Noto Sans KR;
250 + text-align: center;
251 +}
252 +#p4{
253 + font-size: 15px;
254 + color: rgb(0, 0, 0);
255 + font-family: Noto Sans KR;
256 + text-align: center;
257 +}
258 +
259 +/* 텍스트 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,50 +9,75 @@ ...@@ -9,50 +9,75 @@
9 <link rel="stylesheet" href="/EMO-SSAGE/emossage.css"> 9 <link rel="stylesheet" href="/EMO-SSAGE/emossage.css">
10 <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script> 10 <script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
11 <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 11 <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
12 + <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
12 <style> 13 <style>
14 +
15 +
13 body { 16 body {
14 - background-image: url("emossage-03.png");
15 - background-repeat: no-repeat;
16 - background-size: 100%;
17 font-family: Noto Sans KR, regular; 17 font-family: Noto Sans KR, regular;
18 text-align: center; 18 text-align: center;
19 } 19 }
20 - 20 +
21 - h1 {
22 - font-size: 50px;
23 - }
24 -
25 - p1 {
26 - font-size: 24px;
27 - }
28 -
29 - p2 {
30 - font-size: 14px
31 - }
32 -
33 - p2.small {
34 - line-height: 0.7;
35 - }
36 </style> 21 </style>
37 - <div style="height: 100px; overflow: auto"> 22 +
38 - </div>
39 -
40 23
41 </head> 24 </head>
42 25
26 +<body style="margin: 0 auto">
27 +<!-- 큰 묶음은 배경임 -->
28 +<div id="gradient-bg">
29 + <!-- 내비게이션 -->
30 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
31 + <!--css link-->
32 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
33 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
34 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
35 +
36 + <body id="page-top">
37 + <!--creating a navigation bar-->
38 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
39 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
40 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
41 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
42 + <span></span> Menu <i class="fa fa-bars"></i>
43 + </button>
44 + </div><!--end of button-->
45 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
46 + <ul class="nav navbar-nav">
47 + <li><a href="/index.html">Home</a></li>
48 + </ul>
49 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
50 + <li> <a href="/About Us/About Us.html">About Us</a></li>
51 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
52 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
53 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
54 + </ul>
55 + </div>
56 + </div>
57 + </nav>
58 + <!-- 내비게이션 -->
59 +
60 +
43 <body> 61 <body>
44 <form action="#"> 62 <form action="#">
63 + <br>
64 + <br>
65 + <br>
66 + <br>
67 + <br>
68 + <p id="p1" class="animated fadeOutUp"> EMOJI + MESSAGE = EMOSSAGE</p>
69 + <br>
70 + <p id="p2" class="animated fadeOutUp">Emossage는 이모지 중심 메세지입니다</p>
45 71
46 - <header> 72 + <br>
47 - <h1>Message + EMOJI<span>= Emossage</span></h1> 73 + <br>
48 - <p1>Emoti는 이모지 중심 메세지입니다</p1> 74 + <br>
49 - <br> 75 + <p id="p3" class="animated2 fadeIn">글자 중 일부가 이모지로 변환됩니다</p>
50 - <p2> 76 + <p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p>
51 - <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br> 77 +
52 - 여러분만의 이모지 편지를 적어보세요<br> 78 +
53 - </p2> 79 +
54 - </p> 80 +
55 - </header>
56 81
57 <!-- <div> 82 <!-- <div>
58 <label class="desc" id="title1" for="Field1">Full Name</label> 83 <label class="desc" id="title1" for="Field1">Full Name</label>
...@@ -95,4 +120,8 @@ ...@@ -95,4 +120,8 @@
95 </div> 120 </div>
96 121
97 </form> 122 </form>
123 +
124 +</div>
125 +<script src="/index.js"></script>
126 +<!-- 큰 묶음은 배경임 -->
98 </body> 127 </body>
...\ No newline at end of file ...\ No newline at end of file
......
1 +/*-----------배경 그라디언트-----------*/
2 +#gradient-bg{
3 + width: 100%;
4 + height: 100vh;
5 + background: rgb(255, 255, 255);
6 + background-image:
7 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
8 + radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
9 + radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
10 + radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
11 + animation: colorChange 6s infinite alternate-reverse;
12 +}
13 +
14 +@keyframes colorChange {
15 + 100% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 100%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 100%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 100%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);}
16 + 99% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 99.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 99.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 99.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 99.5%);}
17 + 98% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 99%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 99%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 99%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 99%);}
18 + 97% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 98.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 98.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 98.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 98.5%);}
19 + 96% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 98%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 98%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 98%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 98%);}
20 + 95% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 97.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 97.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 97.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 97.5%);}
21 + 94% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 97%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 97%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 97%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 97%);}
22 + 93% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 96.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 96.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 96.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 96.5%);}
23 + 92% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 96%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 96%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 96%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 96%);}
24 + 91% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 95.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 95.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 95.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 95.5%);}
25 + 90% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 95%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 95%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 95%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 95%);}
26 + 89% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 94.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 94.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 94.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 94.5%);}
27 + 88% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 94%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 94%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 94%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 94%);}
28 + 87% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 93.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 93.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 93.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 93.5%);}
29 + 86% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 93%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 93%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 93%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 93%);}
30 + 85% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 92.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 92.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 92.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 92.5%);}
31 + 84% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 92%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 92%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 92%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 92%);}
32 + 83% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 91.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 91.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 91.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 91.5%);}
33 + 82% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 91%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 91%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 91%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 91%);}
34 + 81% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 90.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 90.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 90.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 90.5%);}
35 + 80% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 90%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 90%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 90%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 90%);}
36 + 79% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 89.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 89.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 89.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 89.5%);}
37 + 78% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 89%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 89%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 89%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 89%);}
38 + 77% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 88.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 88.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 88.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 88.5%);}
39 + 76% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 88%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 88%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 88%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 88%);}
40 + 75% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 87.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 87.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 87.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 87.5%);}
41 + 74% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 87%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 87%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 87%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 87%);}
42 + 73% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 86.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 86.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 86.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 86.5%);}
43 + 72% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 86%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 86%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 86%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 86%);}
44 + 71% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 85.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 85.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 85.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 85.5%);}
45 + 70% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 85%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 85%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 85%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 85%);}
46 + 69% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 84.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 84.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 84.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 84.5%);}
47 + 68% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 84%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 84%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 84%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 84%);}
48 + 67% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 83.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 83.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 83.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 83.5%);}
49 + 66% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 83%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 83%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 83%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 83%);}
50 + 65% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 82.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 82.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 82.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 82.5%);}
51 + 64% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 82%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 82%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 82%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 82%);}
52 + 63% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 81.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 81.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 81.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 81.5%);}
53 + 62% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 81%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 81%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 81%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 81%);}
54 + 61% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 80.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 80.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 80.5%);}
55 + 60% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 80%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 80%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 80%);}
56 + 59% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 79.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 79.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 79.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 79.5%);}
57 + 58% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 79%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 79%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 79%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 79%);}
58 + 57% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 78.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 78.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 78.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 78.5%);}
59 + 56% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 78%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 78%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 78%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 78%);}
60 + 55% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 77.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 77.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 77.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 77.5%);}
61 + 54% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 77%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 77%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 77%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 77%);}
62 + 53% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 76.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 76.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 76.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 76.5%);}
63 + 52% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 76%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 76%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 76%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 76%);}
64 + 51% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 75.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 75.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 75.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 75.5%);}
65 + 50% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 75%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 75%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 75%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 75%);}
66 + 49% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 74.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 74.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 74.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 74.5%);}
67 + 48% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 74%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 74%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 74%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 74%);}
68 + 47% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 73.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 73.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 73.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 73.5%);}
69 + 46% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 73%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 73%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 73%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 73%);}
70 + 45% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 72.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 72.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 72.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 72.5%);}
71 + 44% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 72%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 72%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 72%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 72%);}
72 + 43% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 71.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 71.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 71.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 71.5%);}
73 + 42% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 71%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 71%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 71%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 71%);}
74 + 41% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 70.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 70.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 70.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 70.5%);}
75 + 40% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 70%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 70%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 70%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 70%);}
76 + 39% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 69.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 69.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 69.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 69.5%);}
77 + 38% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 69%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 69%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 69%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 69%);}
78 + 37% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 68.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 68.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 68.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 68.5%);}
79 + 36% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 68%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 68%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 68%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 68%);}
80 + 35% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 67.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 67.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 67.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 67.5%);}
81 + 34% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 67%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 67%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 67%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 67%);}
82 + 33% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 66.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 66.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 66.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 66.5%);}
83 + 32% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 66%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 66%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 66%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 66%);}
84 + 31% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 65.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 65.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 65.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 65.5%);}
85 + 30% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 65%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 65%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 65%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 65%);}
86 + 29% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 64.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 64.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 64.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 64.5%);}
87 + 28% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 64%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 64%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 64%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 64%);}
88 + 27% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 63.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 63.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 63.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 63.5%);}
89 + 26% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 63%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 63%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 63%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 63%);}
90 + 25% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 62.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 62.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 62.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 62.5%);}
91 + 24% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 62%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 62%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 62%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 62%);}
92 + 23% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 61.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 61.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 61.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 61.5%);}
93 + 22% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 61%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 61%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 61%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 61%);}
94 + 21% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 60.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 60.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 60.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 60.5%);}
95 + 20% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 60%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 60%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 60%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 60%);}
96 + 19% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 59.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 59.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 59.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 59.5%);}
97 + 18% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 59%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 59%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 59%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 59%);}
98 + 17% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 58.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 58.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 58.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 58.5%);}
99 + 16% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 58%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 58%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 58%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 58%);}
100 + 15% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 57.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 57.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 57.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 57.5%);}
101 + 14% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 57%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 57%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 57%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 57%);}
102 + 13% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 56.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 56.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 56.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 56.5%);}
103 + 12% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 56%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 56%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 56%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 56%);}
104 + 11% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 55.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 55.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 55.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 55.5%);}
105 + 10% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 55%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 55%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 55%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 55%);}
106 + 9% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 54.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 54.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 54.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 54.5%);}
107 + 8% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 54%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 54%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 54%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 54%);}
108 + 7% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 53.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 53.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 53.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 53.5%);}
109 + 6% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 53%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 53%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 53%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 53%);}
110 + 5% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 52.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 52.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 52.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 52.5%);}
111 + 4% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 52%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 52%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 52%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 52%);}
112 + 3% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51.5%);}
113 + 2% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51%);}
114 + 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);}
115 + 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);}
116 +}
117 +/*-----------배경 그라디언트-----------*/
118 +
119 +
1 * { 120 * {
2 -webkit-box-sizing: border-box; 121 -webkit-box-sizing: border-box;
3 -moz-box-sizing: border-box; 122 -moz-box-sizing: border-box;
......
...@@ -480,10 +480,6 @@ body { ...@@ -480,10 +480,6 @@ body {
480 /* text fade in */ 480 /* text fade in */
481 481
482 482
483 -
484 -
485 -
486 -
487 /* 텍스트 */ 483 /* 텍스트 */
488 #p1 { 484 #p1 {
489 font-size: 50px; 485 font-size: 50px;
......
1 +:root {
2 + --FACE_WIDTH: 450px;
3 + --FACE_HEIGHT: 450px;
4 + --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
5 + --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
6 + --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
7 + --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
8 + --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
9 + --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
10 + --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
11 + --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
12 + --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
13 + --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
14 + --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
15 + --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
16 + --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
17 +}
18 +
19 +/* 이모지 얼굴 */
20 +body {
21 + display: flex;
22 + align-items: center;
23 + justify-content: center;
24 + height: 100vh;
25 + }
26 +
27 + #emoji {
28 + position: relative;
29 + width: var(--FACE_WIDTH);
30 + height: var(--FACE_HEIGHT);
31 + transform: translate3d(0, 0, 0);
32 + }
33 +
34 + .layer {
35 + position: absolute;
36 + width: 100%;
37 + height: 100%;
38 + }
39 +
40 + .face {
41 + position: absolute;
42 + top: 0;
43 + right: 0;
44 + bottom: 0;
45 + left: 0;
46 + margin: auto;
47 + width: var(--FACE_WIDTH);
48 + height: var(--FACE_HEIGHT);
49 + background-color: #FECA32;
50 + border-radius: 100%;
51 + box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
52 + }
53 +
54 + .shine {
55 + position: absolute;
56 + top: 0;
57 + right: 0;
58 + bottom: 0;
59 + left: 0;
60 + margin: auto;
61 + width: var(--SHINE_WIDTH);
62 + height: var(--SHINE_HEIGHT);
63 + background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
64 + border-radius: 100%;
65 + opacity: 0.8;
66 + }
67 +
68 + .eye {
69 + width: var(--EYE_WIDTH);
70 + height: var(--EYE_HEIGHT);
71 + background-color: #A1620F;
72 + border-radius: 100%;
73 + box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
74 + -webkit-animation: blink 5s infinite;
75 + animation: blink 5s infinite;
76 + }
77 + .eye.left {
78 + position: absolute;
79 + top: 0;
80 + right: var(--EYE_LEFT_RIGHT);
81 + bottom: var(--EYE_LEFT_BOTTOM);
82 + left: 0;
83 + margin: auto;
84 + }
85 + .eye.right {
86 + position: absolute;
87 + top: 0;
88 + right: 0;
89 + bottom: var(--EYE_RIGHT_BOTTOM);
90 + left: var(--EYE_RIGHT_LEFT);
91 + margin: auto;
92 + }
93 +
94 + .mouth {
95 + position: absolute;
96 + top: var(--MOUTH_TOP);
97 + right: 0;
98 + bottom: 0;
99 + left: 0;
100 + margin: auto;
101 + overflow: hidden;
102 + width: var(--MOUTH_WIDTH);
103 + height: var(--MOUTH_HEIGHT);
104 + transform: translate3d(0, 0, 0);
105 + }
106 + .mouth:before {
107 + position: absolute;
108 + top: 0;
109 + right: 0;
110 + bottom: var(--MOUTH_BEFORE_BOTTOM);
111 + left: 0;
112 + margin: auto;
113 + content: "";
114 + width: 100%;
115 + height: 100%;
116 + background-color: #6E440B;
117 + border-radius: 100%;
118 + box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
119 + transform: scale(1);
120 + }
121 + .mouth:after {
122 + position: absolute;
123 + top: 0;
124 + right: 0;
125 + bottom: var(--MOUTH_AFTER_BOTTOM);
126 + left: 0;
127 + margin: auto;
128 + content: "";
129 + width: calc(100% - 20px);
130 + height: 100%;
131 + background-color: #FECA32;
132 + border-radius: 100%;
133 + box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
134 + transform-origin: 50% 100%;
135 + transform: scale(1.6);
136 + }
137 +
138 + @-webkit-keyframes blink {
139 + 0%, 96% {
140 + transform: scaleY(1);
141 + }
142 + 98% {
143 + transform: scaleY(0.1);
144 + }
145 + 100% {
146 + transform: scaleY(1);
147 + }
148 + }
149 +
150 + @keyframes blink {
151 + 0%, 96% {
152 + transform: scaleY(1);
153 + }
154 + 98% {
155 + transform: scaleY(0.1);
156 + }
157 + 100% {
158 + transform: scaleY(1);
159 + }
160 + }
161 + /* 이모지 얼굴 */
162 +
1 /* 내비 */ 163 /* 내비 */
2 body { 164 body {
3 font-family: Noto Sans Kr, Bold; 165 font-family: Noto Sans Kr, Bold;
......
...@@ -42,5 +42,30 @@ ...@@ -42,5 +42,30 @@
42 </div> 42 </div>
43 </nav> 43 </nav>
44 <!-- 내비게이션 --> 44 <!-- 내비게이션 -->
45 +
46 + <!-- 이모지 얼굴 -->
47 + <div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
48 + <ul id="emoji">
49 + <li class="layer" data-depth="0.2">
50 + <div class="face"></div>
51 + </li>
52 + <li class="layer" data-depth="0.3">
53 + <div class="shine"></div>
54 + </li>
55 + <li class="layer" data-depth="0.8">
56 + <div class="eye left"></div>
57 + </li>
58 + <li class="layer" data-depth="0.8">
59 + <div class="eye right"></div>
60 + </li>
61 + <li class="layer" data-depth="0.8">
62 + <div class="mouth"></div>
63 + </li>
64 + </ul>
65 +
66 + <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script src="/face.js"></script>
67 +</div>
68 +<!-- 이모지 얼굴 -->
69 +
45 70
46 </body> 71 </body>
......
...@@ -116,167 +116,7 @@ ...@@ -116,167 +116,7 @@
116 } 116 }
117 /*-----------배경 그라디언트-----------*/ 117 /*-----------배경 그라디언트-----------*/
118 118
119 -:root {
120 - --FACE_WIDTH: 450px;
121 - --FACE_HEIGHT: 450px;
122 - --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
123 - --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
124 - --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
125 - --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
126 - --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
127 - --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
128 - --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
129 - --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
130 - --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
131 - --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
132 - --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
133 - --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
134 - --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
135 -}
136 119
137 -/* 이모지 얼굴 */
138 -body {
139 - display: flex;
140 - align-items: center;
141 - justify-content: center;
142 - height: 100vh;
143 - }
144 -
145 - #emoji {
146 - position: relative;
147 - width: var(--FACE_WIDTH);
148 - height: var(--FACE_HEIGHT);
149 - transform: translate3d(0, 0, 0);
150 - }
151 -
152 - .layer {
153 - position: absolute;
154 - width: 100%;
155 - height: 100%;
156 - }
157 -
158 - .face {
159 - position: absolute;
160 - top: 0;
161 - right: 0;
162 - bottom: 0;
163 - left: 0;
164 - margin: auto;
165 - width: var(--FACE_WIDTH);
166 - height: var(--FACE_HEIGHT);
167 - background-color: #FECA32;
168 - border-radius: 100%;
169 - box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
170 - }
171 -
172 - .shine {
173 - position: absolute;
174 - top: 0;
175 - right: 0;
176 - bottom: 0;
177 - left: 0;
178 - margin: auto;
179 - width: var(--SHINE_WIDTH);
180 - height: var(--SHINE_HEIGHT);
181 - background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
182 - border-radius: 100%;
183 - opacity: 0.8;
184 - }
185 -
186 - .eye {
187 - width: var(--EYE_WIDTH);
188 - height: var(--EYE_HEIGHT);
189 - background-color: #A1620F;
190 - border-radius: 100%;
191 - box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
192 - -webkit-animation: blink 5s infinite;
193 - animation: blink 5s infinite;
194 - }
195 - .eye.left {
196 - position: absolute;
197 - top: 0;
198 - right: var(--EYE_LEFT_RIGHT);
199 - bottom: var(--EYE_LEFT_BOTTOM);
200 - left: 0;
201 - margin: auto;
202 - }
203 - .eye.right {
204 - position: absolute;
205 - top: 0;
206 - right: 0;
207 - bottom: var(--EYE_RIGHT_BOTTOM);
208 - left: var(--EYE_RIGHT_LEFT);
209 - margin: auto;
210 - }
211 -
212 - .mouth {
213 - position: absolute;
214 - top: var(--MOUTH_TOP);
215 - right: 0;
216 - bottom: 0;
217 - left: 0;
218 - margin: auto;
219 - overflow: hidden;
220 - width: var(--MOUTH_WIDTH);
221 - height: var(--MOUTH_HEIGHT);
222 - transform: translate3d(0, 0, 0);
223 - }
224 - .mouth:before {
225 - position: absolute;
226 - top: 0;
227 - right: 0;
228 - bottom: var(--MOUTH_BEFORE_BOTTOM);
229 - left: 0;
230 - margin: auto;
231 - content: "";
232 - width: 100%;
233 - height: 100%;
234 - background-color: #6E440B;
235 - border-radius: 100%;
236 - box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
237 - transform: scale(1);
238 - }
239 - .mouth:after {
240 - position: absolute;
241 - top: 0;
242 - right: 0;
243 - bottom: var(--MOUTH_AFTER_BOTTOM);
244 - left: 0;
245 - margin: auto;
246 - content: "";
247 - width: calc(100% - 20px);
248 - height: 100%;
249 - background-color: #FECA32;
250 - border-radius: 100%;
251 - box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
252 - transform-origin: 50% 100%;
253 - transform: scale(1.6);
254 - }
255 -
256 - @-webkit-keyframes blink {
257 - 0%, 96% {
258 - transform: scaleY(1);
259 - }
260 - 98% {
261 - transform: scaleY(0.1);
262 - }
263 - 100% {
264 - transform: scaleY(1);
265 - }
266 - }
267 -
268 - @keyframes blink {
269 - 0%, 96% {
270 - transform: scaleY(1);
271 - }
272 - 98% {
273 - transform: scaleY(0.1);
274 - }
275 - 100% {
276 - transform: scaleY(1);
277 - }
278 - }
279 - /* 이모지 얼굴 */
280 120
281 /* 내비 */ 121 /* 내비 */
282 body { 122 body {
......
...@@ -45,30 +45,9 @@ ...@@ -45,30 +45,9 @@
45 </nav> 45 </nav>
46 <!-- 내비게이션 --> 46 <!-- 내비게이션 -->
47 47
48 - 48 + <div style="float: left; width: 100%;">
49 - <!-- 이모지 얼굴 --> 49 + <img src="/src/3d_crossword-01.png" style="display: block; margin: 0 auto; width: 750px; height:750px;">
50 - <div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
51 - <ul id="emoji">
52 - <li class="layer" data-depth="0.2">
53 - <div class="face"></div>
54 - </li>
55 - <li class="layer" data-depth="0.3">
56 - <div class="shine"></div>
57 - </li>
58 - <li class="layer" data-depth="0.8">
59 - <div class="eye left"></div>
60 - </li>
61 - <li class="layer" data-depth="0.8">
62 - <div class="eye right"></div>
63 - </li>
64 - <li class="layer" data-depth="0.8">
65 - <div class="mouth"></div>
66 - </li>
67 - </ul>
68 -
69 - <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script src="/face.js"></script>
70 </div> 50 </div>
71 - <!-- 이모지 얼굴 -->
72 51
73 <!-- 이모지 레인 --> 52 <!-- 이모지 레인 -->
74 <div style="z-index: 1;"> 53 <div style="z-index: 1;">
......