mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
298 lines
20 KiB
HTML
298 lines
20 KiB
HTML
<div class="notification">
|
|
<div id="goku">
|
|
<div class="head"></div>
|
|
<div class="body"></div>
|
|
<div class="leg"></div>
|
|
<div class="shadow"></div>
|
|
</div>
|
|
|
|
<span class="dirt">
|
|
|
|
<div class="text">
|
|
<span class="font hover">Level up!</span>
|
|
<span class="font-text hover">Your power:</span>
|
|
<span class="font-power hover">+8000!</span>
|
|
</div>
|
|
<div class="parchment">
|
|
</div>
|
|
</span></div>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by M4NT - Tags: notification */
|
|
.notification {
|
|
width: 250px;
|
|
height: 60px;
|
|
background: #18532c;
|
|
border-radius: 14px;
|
|
margin-top: 250px;
|
|
user-select: none;
|
|
-webkit-transform: translateY(0);
|
|
-moz-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-o-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-transition: 0.5s;
|
|
-o-transition: 0.5s;
|
|
-moz-transition: 0.5s;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.notification:hover {
|
|
-webkit-transform: translateY(-8px);
|
|
-moz-transform: translateY(-8px);
|
|
-ms-transform: translateY(-8px);
|
|
-o-transform: translateY(-8px);
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
@-webkit-keyframes head {
|
|
0% {
|
|
top: 0px;
|
|
}
|
|
|
|
50% {
|
|
top: 6px;
|
|
}
|
|
|
|
100% {
|
|
top: 0px;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes body {
|
|
0% {
|
|
top: 220px;
|
|
}
|
|
|
|
50% {
|
|
top: 223px;
|
|
}
|
|
|
|
100% {
|
|
top: 220px;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes leg {
|
|
0% {
|
|
top: 300px;
|
|
}
|
|
|
|
50% {
|
|
top: 300px;
|
|
}
|
|
|
|
100% {
|
|
top: 300px;
|
|
}
|
|
}
|
|
|
|
@keyframes head {
|
|
0% {
|
|
top: 0px;
|
|
}
|
|
|
|
50% {
|
|
top: 6px;
|
|
}
|
|
|
|
100% {
|
|
top: 0px;
|
|
}
|
|
}
|
|
|
|
@keyframes body {
|
|
0% {
|
|
top: 220px;
|
|
}
|
|
|
|
50% {
|
|
top: 223px;
|
|
}
|
|
|
|
100% {
|
|
top: 220px;
|
|
}
|
|
}
|
|
|
|
@keyframes leg {
|
|
0% {
|
|
top: 300px;
|
|
}
|
|
|
|
50% {
|
|
top: 300px;
|
|
}
|
|
|
|
100% {
|
|
top: 300px;
|
|
}
|
|
}
|
|
|
|
#goku {
|
|
margin-top: -220px;
|
|
margin-left: -50px;
|
|
background: #fff;
|
|
position: relative;
|
|
-ms-transform: scale(0.5);
|
|
/* IE 9 */
|
|
-webkit-transform: scale(0.5);
|
|
/* Chrome, Safari, Opera */
|
|
transform: scale(0.5);
|
|
z-index: 999999;
|
|
}
|
|
|
|
.shadow {
|
|
position: absolute;
|
|
top: 450px;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #005e2f;
|
|
box-shadow: -120px -10px #176d42, -110px -10px #005e2f, -100px -10px #005e2f, -90px -10px #005e2f, -80px -10px #005e2f, -70px -10px #005e2f, -60px -10px #005e2f, -50px -10px #005e2f, -40px -10px #005e2f, -30px -10px #005e2f, -20px -10px #005e2f, -10px -10px #005e2f, 0px -10px #005e2f, 10px -10px #005e2f, 20px -10px #005e2f, 30px -10px #005e2f, 40px -10px #005e2f, 50px -10px #005e2f, 60px -10px #005e2f, -130px 0px #176d42, -120px 0px #005e2f, -110px 0px #005e2f, -100px 0px #005e2f, -90px 0px #005e2f, -80px 0px #005e2f, -70px 0px #005e2f, -60px 0px #005e2f, -50px 0px #005e2f, -40px 0px #005e2f, -30px 0px #005e2f, -20px 0px #005e2f, -10px 0px #005e2f, 0px 0px #005e2f, 10px 0px #005e2f, 20px 0px #005e2f, 30px 0px #005e2f, 40px 0px #005e2f, 50px 0px #005e2f, 60px 0px #005e2f, -130px 10px #176d42, -120px 10px #005e2f, -110px 10px #005e2f, -100px 10px #005e2f, -90px 10px #005e2f, -80px 10px #005e2f, -70px 10px #005e2f, -60px 10px #005e2f, -50px 10px #005e2f, -40px 10px #005e2f, -30px 10px #005e2f, -20px 10px #005e2f, -10px 10px #005e2f, 0px 10px #005e2f, 10px 10px #005e2f, 20px 10px #005e2f, 30px 10px #005e2f, 40px 10px #005e2f, 50px 10px #005e2f, 60px 10px #005e2f, -130px 20px #176d42, -120px 20px #005e2f, -110px 20px #005e2f, -100px 20px #005e2f, -90px 20px #005e2f, -80px 20px #005e2f, -70px 20px #005e2f, -60px 20px #005e2f, -50px 20px #005e2f, -40px 20px #005e2f, -30px 20px #005e2f, -10px 20px #005e2f, 0px 20px #005e2f, 10px 20px #005e2f, 20px 20px #005e2f, 30px 20px #005e2f, 40px 20px #005e2f, 50px 20px #005e2f, 60px 20px #005e2f, 70px 20px #005e2f, -120px 30px #005e2f, -110px 30px #005e2f, -100px 30px #005e2f, -90px 30px #005e2f, -80px 30px #005e2f, -70px 30px #005e2f, -60px 30px #005e2f, -50px 30px #005e2f, -10px 0px transparent;
|
|
}
|
|
|
|
.leg {
|
|
-webkit-animation: leg 1s infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
animation: leg 1s infinite;
|
|
animation-timing-function: linear;
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: 300px;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #000;
|
|
box-shadow: -50px 0px #000, -40px 0px #000, -30px 0px #000, -20px 0px #000, -10px 0px #000, 10px 0px #000, 20px 0px #000, 30px 0px #000, -50px 10px #000, -40px 10px #001e3d, -30px 10px #0055aa, -20px 10px #0080ff, -10px 10px #000, 0px 10px #0080ff, 10px 10px #000, 20px 10px #0055aa, 30px 10px #000, -50px 20px #000, -40px 20px #000, -30px 20px #000, -20px 20px #000, -10px 20px #0055aa, 0px 20px #000, 10px 20px #001e3d, 20px 20px #000, 30px 20px #000, 40px 20px #000, -70px 30px #000, -60px 30px #000, -50px 30px #3d1e00, -40px 30px #aa5500, -30px 30px #aa5500, -20px 30px #000, -10px 30px #0080ff, 0px 30px #001e3d, 10px 30px #0055aa, 20px 30px #000, 30px 30px #3d1e00, 40px 30px #000, -70px 40px #000, -60px 40px #000, -50px 40px #aa5500, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0080ff, 0px 40px #001e3d, 10px 40px #0080ff, 20px 40px #000, 30px 40px #3d1e00, 40px 40px #000, -80px 50px #000, -70px 50px #000, -60px 50px #000, -50px 50px #ff7700, -40px 50px #ff7700, -30px 50px #ff7700, -20px 50px #000, -10px 50px #0080ff, 0px 50px #001e3d, 10px 50px #0080ff, 20px 50px #000, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -80px 60px #000, -70px 60px #aa5500, -60px 60px #aa5500, -50px 60px #ff7700, -40px 60px #ff7700, -30px 60px #ff7700, -20px 60px #000, -10px 60px #0055aa, 0px 60px #001e3d, 10px 60px #0080ff, 20px 60px #000, 30px 60px #aa5500, 40px 60px #3d1e00, 50px 60px #000, -80px 70px #000, -70px 70px #aa5500, -60px 70px #ff7700, -50px 70px #ff7700, -40px 70px #ff7700, -30px 70px #ff7700, -20px 70px #000, -10px 70px #001e3d, 0px 70px #001e3d, 10px 70px #0080ff, 20px 70px #000, 30px 70px #aa5500, 40px 70px #aa5500, 50px 70px #000, -80px 80px #000, -70px 80px #3d1e00, -60px 80px #aa5500, -50px 80px #ff7700, -40px 80px #ff7700, -30px 80px #aa5500, -20px 80px #000, -10px 80px #000, 0px 80px #3d1e00, 10px 80px #000, 20px 80px #aa5500, 30px 80px #aa5500, 40px 80px #aa5500, 50px 80px #000, -90px 90px #000, -80px 90px #aa5500, -70px 90px #3d1e00, -60px 90px #3d1e00, -50px 90px #aa5500, -40px 90px #aa5500, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #3d1e00, 10px 90px #3d1e00, 20px 90px #3d1e00, 30px 90px #aa5500, 40px 90px #aa5500, 50px 90px #000, -90px 100px #000, -80px 100px #ff7700, -70px 100px #aa5500, -60px 100px #aa5500, -50px 100px #aa5500, -40px 100px #3d1e00, -30px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #3d1e00, 20px 100px #aa5500, 30px 100px #aa5500, 40px 100px #3d1e00, 50px 100px #000, -100px 110px #000, -90px 110px #000, -80px 110px #000, -70px 110px #ff7700, -60px 110px #ff7700, -50px 110px #ff7700, -40px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #3d1e00, 30px 110px #3d1e00, 40px 110px #000, -100px 120px #000, -90px 120px #001e3d, -80px 120px #0080ff, -70px 120px #ffbb00, -60px 120px #0080ff, -50px 120px #000, -40px 120px #000, -10px 120px #000, 0px 120px #001e3d, 10px 120px #001e3d, 20px 120px #0080ff, 30px 120px #ffbb00, 40px 120px #000, -100px 130px #000, -90px 130px #0055aa, -80px 130px #ffff00, -70px 130px #ffbb00, -60px 130px #0055aa, -50px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #001e3d, 20px 130px #000, 30px 130px #ff0000, 40px 130px #000, -110px 140px #000, -100px 140px #0055aa, -90px 140px #ff0000, -80px 140px #ff0000, -70px 140px #001e3d, -60px 140px #001e3d, -50px 140px #000, -10px 140px #000, 0px 140px #3d1e00, 10px 140px #ff0000, 20px 140px #0055aa, 30px 140px #0055aa, 40px 140px #ffbb00, 50px 140px #000, -110px 150px #000, -100px 150px #0055aa, -90px 150px #ffbb00, -80px 150px #0080ff, -70px 150px #ff0000, -60px 150px #000, 0px 150px #000, 10px 150px #001e3d, 20px 150px #0055aa, 30px 150px #0055aa, 40px 150px #0055aa, 50px 150px #ffbb00, 60px 150px #000, -110px 160px #000, -100px 160px #001e3d, -90px 160px #aa5500, -80px 160px #0080ff, -70px 160px #0080ff, -60px 160px #000, 0px 160px #000, 10px 160px #000, 20px 160px #000, 30px 160px #000, 40px 160px #000, 50px 160px #000, 60px 160px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #000, -60px 170px #000;
|
|
}
|
|
|
|
.body {
|
|
-webkit-animation: body 1s infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
animation: body 1s infinite;
|
|
animation-timing-function: linear;
|
|
position: absolute;
|
|
top: 220px;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: transparent;
|
|
box-shadow: -90px 0px #000, -80px 0px #3d1e00, -70px 0px #3d1e00, -60px 0px #aa5500, -50px 0px #aa5500, 40px 0px #000, -100px 10px #000, -90px 10px #001e3d, -80px 10px #0080ff, -70px 10px #0080ff, -60px 10px #3d1e00, -50px 10px #ff7700, -40px 10px #aa5500, 30px 10px #aa5500, 40px 10px #000, -100px 20px #000, -90px 20px #000, -80px 20px #0055aa, -70px 20px #0055aa, -60px 20px #0080ff, -50px 20px #ff7700, -40px 20px #ff7700, -30px 20px #000, -20px 20px #c66b49, -10px 20px #ffbb80, 0px 20px #c66b49, 10px 20px #ffbb80, 20px 20px #000, 30px 20px #ff7700, 40px 20px #000, -110px 30px #000, -100px 30px #3d1e00, -90px 30px #c66b49, -80px 30px #000, -70px 30px #0055aa, -60px 30px #0055aa, -50px 30px #aa5500, -40px 30px #ff7700, -30px 30px #aa5500, -20px 30px #0055aa, -10px 30px #0080ff, 0px 30px #0080ff, 10px 30px #0080ff, 20px 30px #000, 30px 30px #ff7700, 40px 30px #000, -110px 40px #000, -100px 40px #c66b49, -90px 40px #c66b49, -80px 40px #c66b49, -70px 40px #000, -60px 40px #000, -50px 40px #000, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0055aa, 0px 40px #0055aa, 10px 40px #0080ff, 20px 40px #000, 30px 40px #808080, 40px 40px #000, -110px 50px #000, -100px 50px #c66b49, -90px 50px #ffbb80, -80px 50px #ffbb80, -70px 50px #000, -60px 50px #000, -50px 50px #3d1e00, -40px 50px #aa5500, -30px 50px #ff7700, -20px 50px #ff7700, -10px 50px #000, 0px 50px #0080ff, 10px 50px #000, 20px 50px #808080, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -120px 60px #000, -110px 60px #c66b49, -100px 60px #3d1e00, -90px 60px #ffbb80, -80px 60px #3d1e00, -70px 60px #000, -60px 60px #000, -50px 60px #c66b49, -40px 60px #000, -30px 60px #aa5500, -20px 60px #ff7700, -10px 60px #ff7700, 0px 60px #000, 10px 60px #ff7700, 20px 60px #808080, 30px 60px #000, 40px 60px #c66b49, 50px 60px #000, -120px 70px #000, -110px 70px #0055aa, -100px 70px #c66b49, -90px 70px #c66b49, -80px 70px #3d1e00, -70px 70px #c66b49, -60px 70px #c66b49, -50px 70px #000, -40px 70px #3d1e00, -30px 70px #3d1e00, -20px 70px #aa5500, -10px 70px #ff7700, 0px 70px #ff7700, 10px 70px #ff7700, 20px 70px #aa5500, 30px 70px #000, 40px 70px #ffbb80, 50px 70px #000, -120px 80px #000, -110px 80px #0055aa, -100px 80px #0080ff, -90px 80px #0055aa, -80px 80px #000, 40px 80px #0080ff, 50px 80px #000, -120px 90px #000, -110px 90px #0055aa, -100px 90px #0080ff, -90px 90px #001e3d, 40px 90px #0055aa, 50px 90px #0080ff, 60px 90px #000, -130px 100px #000, -120px 100px #c66b49, -110px 100px #c66b49, -100px 100px #ffbb80, -90px 100px #c66b49, -80px 100px #3d1e00, 50px 100px #ffbb80, 60px 100px #000, -130px 110px #000, -120px 110px #c66b49, -110px 110px #ffbb80, -100px 110px #ffbb80, -90px 110px #ffbb80, -80px 110px #ffbb80, 50px 110px #ffbb80, 60px 110px #000, -130px 120px #000, -120px 120px #c66b49, -110px 120px #ffbb80, -100px 120px #ffbb80, -90px 120px #000, -80px 120px #c66b49, 50px 120px #c66b49, 60px 120px #000, -130px 130px #000, -120px 130px #c66b49, -110px 130px #000, -100px 130px #ffbb80, -90px 130px #000, -120px 140px #000, -110px 140px #000, -100px 140px #c66b49, -90px 140px #000, -100px 150px #000, -90px 150px #c66b49, -90px 160px #000;
|
|
}
|
|
|
|
.head {
|
|
-webkit-animation: head 1s infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
animation: head 1s infinite;
|
|
animation-timing-function: linear;
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 0px;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #000;
|
|
box-shadow: 10px 0px #000, 20px 0px #000, 30px 0px #000, 40px 0px #000, 50px 0px #000, -20px 10px #000, -10px 10px #000, 0px 10px #000, 10px 10px #000, 20px 10px #000, 30px 10px #000, -30px 20px #000, -20px 20px #000, -10px 20px #000, 0px 20px #000, 10px 20px #000, 20px 20px #000, -40px 30px #000, -30px 30px #000, -20px 30px #000, -10px 30px #000, 0px 30px #000, 10px 30px #000, 20px 30px #000, -40px 40px #000, -30px 40px #000, -20px 40px #000, -10px 40px #000, 0px 40px #000, 10px 40px #000, 40px 40px #000, 50px 40px #000, 60px 40px #000, 70px 40px #000, -50px 50px #000, -40px 50px #000, -30px 50px #000, -20px 50px #000, -10px 50px #000, 0px 50px #000, 10px 50px #000, 30px 50px #000, 40px 50px #000, 50px 50px #000, 60px 50px #000, 70px 50px #000, 80px 50px #000, 90px 50px #000, -50px 60px #000, -40px 60px #000, -30px 60px #000, -20px 60px #000, -10px 60px #000, 0px 60px #000, 10px 60px #000, 20px 60px #000, 30px 60px #000, 40px 60px #000, 50px 60px #000, 60px 60px #000, 70px 60px #000, 80px 60px #000, 90px 60px #000, 100px 60px #000, -50px 70px #000, -40px 70px #000, -30px 70px #000, -20px 70px #000, -10px 70px #000, 0px 70px #000, 10px 70px #000, 20px 70px #000, 30px 70px #000, 40px 70px #000, 50px 70px #000, 60px 70px #000, 70px 70px #000, 80px 70px #000, 90px 70px #000, 100px 70px #000, 110px 70px #000, -50px 80px #000, -40px 80px #000, -30px 80px #000, -20px 80px #000, -10px 80px #000, 0px 80px #000, 10px 80px #000, 20px 80px #000, 30px 80px #000, 40px 80px #000, 50px 80px #000, 60px 80px #000, 70px 80px #000, 80px 80px #000, 90px 80px #000, 100px 80px #000, 110px 80px #000, 120px 80px #000, -70px 90px #000, -60px 90px #000, -50px 90px #000, -40px 90px #000, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #000, 10px 90px #000, 20px 90px #000, 30px 90px #000, 40px 90px #000, 50px 90px #000, 60px 90px #000, 70px 90px #000, 80px 90px #000, 90px 90px #000, 100px 90px #000, 110px 90px #000, 120px 90px #000, -80px 100px #000, -70px 100px #000, -60px 100px #000, -50px 100px #000, -40px 100px #000, -30px 100px #000, -20px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #000, 20px 100px #000, 30px 100px #000, 40px 100px #000, 50px 100px #000, 60px 100px #000, 70px 100px #000, 80px 100px #000, 90px 100px #000, -90px 110px #000, -80px 110px #000, -70px 110px #000, -60px 110px #000, -50px 110px #000, -40px 110px #000, -30px 110px #000, -20px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #000, 30px 110px #000, 40px 110px #000, 50px 110px #000, 60px 110px #000, 70px 110px #000, -90px 120px #000, -80px 120px #000, -70px 120px #000, -60px 120px #000, -50px 120px #000, -40px 120px #000, -30px 120px #000, -20px 120px #000, -10px 120px #000, 0px 120px #000, 10px 120px #000, 20px 120px #000, 30px 120px #000, 40px 120px #000, 50px 120px #000, 60px 120px #000, -130px 130px #000, -120px 130px #000, -110px 130px #000, -100px 130px #000, -90px 130px #000, -80px 130px #000, -70px 130px #000, -60px 130px #000, -50px 130px #000, -40px 130px #000, -30px 130px #000, -20px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #000, 20px 130px #000, 30px 130px #000, 40px 130px #000, 50px 130px #000, 60px 130px #000, 70px 130px #000, 80px 130px #000, -110px 140px #000, -100px 140px #000, -90px 140px #000, -80px 140px #000, -70px 140px #000, -60px 140px #000, -50px 140px #000, -40px 140px #000, -30px 140px #000, -20px 140px #000, -10px 140px #000, 0px 140px #c66b49, 10px 140px #000, 20px 140px #000, 30px 140px #000, 40px 140px #000, 50px 140px #000, 60px 140px #000, 70px 140px #000, 80px 140px #000, 90px 140px #000, 100px 140px #000, -130px 150px #000, -120px 150px #000, -110px 150px #000, -100px 150px #000, -90px 150px #000, -80px 150px #000, -70px 150px #000, -60px 150px #000, -50px 150px #000, -40px 150px #c66b49, -30px 150px #000, -20px 150px #000, -10px 150px #000, 0px 150px #c66b49, 10px 150px #c66b49, 20px 150px #c66b49, 30px 150px #000, 40px 150px #000, 50px 150px #000, 60px 150px #000, 70px 150px #000, 80px 150px #000, 90px 150px #000, 100px 150px #000, 110px 150px #000, -150px 160px #000, -140px 160px #000, -130px 160px #000, -120px 160px #000, -110px 160px #000, -100px 160px #000, -90px 160px #000, -80px 160px #000, -70px 160px #000, -60px 160px #000, -50px 160px #000, -40px 160px #c66b49, -30px 160px #c66b49, -20px 160px #000, -10px 160px #000, 0px 160px #c66b49, 10px 160px #ffbb80, 20px 160px #ffbb80, 30px 160px #c66b49, 40px 160px #000, 50px 160px #000, 60px 160px #000, 70px 160px #000, 80px 160px #000, -140px 170px #000, -130px 170px #000, -120px 170px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #ffbb80, -60px 170px #000, -50px 170px #000, -40px 170px #000, -30px 170px #000, -20px 170px #000, -10px 170px #000, 0px 170px #ffbb80, 10px 170px #ffbb80, 20px 170px #ffbb80, 30px 170px #ffbb80, 40px 170px #c66b49, 50px 170px #000, 60px 170px #000, -120px 180px #000, -110px 180px #000, -100px 180px #000, -90px 180px #000, -80px 180px #000, -70px 180px #ffbb80, -60px 180px #000, -50px 180px #47261a, -40px 180px #000, -30px 180px #bbb, -20px 180px #bbb, -10px 180px #000, 0px 180px #000, 10px 180px #ffbb80, 20px 180px #ffbb80, 30px 180px #000, 40px 180px #000, 50px 180px #000, 60px 180px #000, -130px 190px #000, -120px 190px #000, -110px 190px #000, -100px 190px #000, -90px 190px #000, -80px 190px #000, -70px 190px #c66b49, -60px 190px #000, -50px 190px #47261a, -40px 190px #c66b49, -30px 190px #bbb, -20px 190px #fff, -10px 190px #555555, 0px 190px #c66b49, 10px 190px #ffbb80, 20px 190px #ffbb80, 30px 190px #c66b49, 40px 190px #000, -100px 200px #000, -90px 200px #000, -80px 200px #000, -70px 200px #000, -60px 200px #000, -50px 200px #47261a, -40px 200px #c66b49, -30px 200px #c66b49, -20px 200px #ffbb80, -10px 200px #ffbb80, 0px 200px #ffbb80, 10px 200px #ffbb80, 20px 200px #ffbb80, 30px 200px #c66b49, 40px 200px #000, -110px 210px #000, -100px 210px #bba578, -90px 210px #000, -80px 210px #000, -70px 210px #000, -60px 210px #000, -50px 210px #000, -40px 210px #47261a, -30px 210px #c66b49, -20px 210px #ffbb80, -10px 210px #ffbb80, 0px 210px #ffbb80, 10px 210px #ffbb80, 20px 210px #c66b49, 30px 210px #000, -40px 220px #000, -30px 220px #000, -20px 220px #c66b49, -10px 220px #ffbb80, 0px 220px #ffbb80, 10px 220px #c66b49, 20px 220px #000, 30px 220px #000, -30px 230px #000, -20px 230px #000, -10px 230px #000, 0px 230px #000, 10px 230px #000, 20px 230px #000;
|
|
}
|
|
|
|
.font {
|
|
font-size: 16px;
|
|
font-family: 'VT323', monospace;
|
|
margin-bottom: 25px;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.font-text {
|
|
font-size: 10px;
|
|
font-family: 'VT323', monospace;
|
|
}
|
|
|
|
.font-power {
|
|
font-family: 'VT323', monospace;
|
|
font-weight: 900;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.text {
|
|
font-size: 22px;
|
|
color: #000;
|
|
margin-top: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 160px;
|
|
text-align: center;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.parchment {
|
|
background: #FFFCD3;
|
|
border: 1px dashed #E99C54;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-left: 155px;
|
|
margin-top: -90px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.parchment {
|
|
/* -xpedu-transform: scale(1.3); */
|
|
/* -ms-transform: scale(1.3); */
|
|
/* transform: scale(1.05); */
|
|
z-index: -999 !important;
|
|
-webkit-transform: translateY(0);
|
|
-moz-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-o-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-transition: 0.5s;
|
|
-o-transition: 0.5s;
|
|
-moz-transition: 0.5s;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.parchment:hover {
|
|
-webkit-transform: translateY(-8px);
|
|
-moz-transform: translateY(-8px);
|
|
-ms-transform: translateY(-8px);
|
|
-o-transform: translateY(-8px);
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.font-text {
|
|
-xpedu-transform: scale(1.1);
|
|
-ms-transform: scale(1.3);
|
|
transform: scale(1.1);
|
|
z-index: 99999;
|
|
}
|
|
|
|
.hover {
|
|
-webkit-transform: translateY(0);
|
|
-moz-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-o-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-transition: 0.5s;
|
|
-o-transition: 0.5s;
|
|
-moz-transition: 0.5s;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.hover:hover {
|
|
-webkit-transform: translateY(-8px);
|
|
-moz-transform: translateY(-8px);
|
|
-ms-transform: translateY(-8px);
|
|
-o-transform: translateY(-8px);
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.font-power:hover {
|
|
color: #ff7700;
|
|
text-decoration: wavy;
|
|
}
|
|
|
|
.font:hover {
|
|
color: #ffbb00;
|
|
}
|
|
</style>
|