add new nuxt build
This commit is contained in:
758
nuxt/assets/global.css
Normal file
758
nuxt/assets/global.css
Normal file
@@ -0,0 +1,758 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700,900|Dancing+Script);
|
||||
|
||||
/* #### Generated By: http://www.cufonfonts.com #### */
|
||||
@font-face {
|
||||
font-family: "RoadRage";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local("RoadRage"),
|
||||
url("http://coding-dude.com/wp/wp-content/uploads/Road_Rage.woff")
|
||||
format("woff");
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
margin-left: -50%;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
background-position-y: 0px;
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--grid-color, black) 0%,
|
||||
transparent calc(1px + var(--grid-blur, 0px)),
|
||||
transparent var(--grid-size),
|
||||
var(--grid-color, black)
|
||||
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
var(--grid-color, black) 0%,
|
||||
transparent calc(1px + var(--grid-blur, 0px)),
|
||||
transparent var(--grid-size),
|
||||
var(--grid-color, black)
|
||||
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
|
||||
);
|
||||
transform: perspective(50vh) rotateX(60deg) translateZ(10px);
|
||||
animation: moving-grid 0.5s infinite linear;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes moving-grid {
|
||||
0% {
|
||||
transform: perspective(50vh) rotateX(60deg) translateZ(10px)
|
||||
translateY(-var(--grid-size));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(50vh) rotateX(60deg) translateZ(10px)
|
||||
translateY(var(--grid-size));
|
||||
}
|
||||
}
|
||||
|
||||
.sun {
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 100%;
|
||||
background-color: yellow;
|
||||
left: calc(50%);
|
||||
bottom: 40%;
|
||||
transform: translateX(-50%);
|
||||
background-image: linear-gradient(red, yellow), linear-gradient(black, white);
|
||||
clip-path: polygon(
|
||||
-50% 0px,
|
||||
150% -50%,
|
||||
150% 55%,
|
||||
-50% 55%,
|
||||
-50% 62%,
|
||||
150% 62%,
|
||||
150% 70%,
|
||||
0 70%,
|
||||
-50% 75%,
|
||||
150% 75%,
|
||||
150% 80%,
|
||||
0 80%,
|
||||
-50% 82%,
|
||||
150% 82%,
|
||||
150% 85%,
|
||||
0 85%,
|
||||
-50% 87%,
|
||||
150% 87%,
|
||||
150% 90%,
|
||||
0 90%,
|
||||
-50% 92%,
|
||||
150% 92%,
|
||||
150% 95%,
|
||||
0 95%,
|
||||
-50% 96%,
|
||||
150% 96%,
|
||||
150% 150%,
|
||||
0 150%
|
||||
);
|
||||
box-shadow: rgba(255, 128, 0, 0.7) 0px 0 20px;
|
||||
}
|
||||
|
||||
.mountain {
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
content: "";
|
||||
bottom: 35%;
|
||||
left: calc(50% + var(--mountain-offset, 0px));
|
||||
border-left: calc(var(--mountain-base) / 2) solid transparent;
|
||||
border-bottom: var(--mountain-height, 100px) solid
|
||||
var(--mountain-color1, white);
|
||||
border-top: 0px solid transparent;
|
||||
border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
|
||||
transform-origin: bottom;
|
||||
transform: skewX(var(--mountain-tilt, 0deg));
|
||||
}
|
||||
|
||||
.mountain:after {
|
||||
content: "";
|
||||
border-left: calc(var(--mountain-base) / 2) solid transparent;
|
||||
border-bottom: var(--mountain-height, 100px) solid
|
||||
var(--mountain-color2, black);
|
||||
border-top: 0px solid transparent;
|
||||
border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
|
||||
transform: translate(-50%) scale(0.98);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
rgba(0, 0, 0, 0.3) 0,
|
||||
transparent 1px,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.3) 3px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.background-80s {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#010310 0,
|
||||
#0c1142 24%,
|
||||
#45125e 45%,
|
||||
#d53567 60%,
|
||||
#f0c3d9 65%,
|
||||
#0c1142 65%
|
||||
)
|
||||
fixed;
|
||||
background-size: 100% var(--background-height, 100vh);
|
||||
overflow: hidden;
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: var(--background-height, 100vh);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.animated-clouds:before {
|
||||
filter: url(#synth-filter);
|
||||
}
|
||||
|
||||
.background-80s:before {
|
||||
content: "";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#010310 0,
|
||||
#0c1142 24%,
|
||||
#45125e 45%,
|
||||
#d53567 60%,
|
||||
#f0c3d9 65%,
|
||||
#0c1142 65%
|
||||
)
|
||||
fixed;
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
background-attachment: fixed;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/*stars*/
|
||||
.stars:after {
|
||||
transform: translateY(-40%);
|
||||
content: " ";
|
||||
border-radius: 100%;
|
||||
width: 3px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
box-shadow: 5vw 15vh 2px white, 1vw 33vh 0px white, 2vw 25vh 2px white,
|
||||
10vw 10vh 2px white, 12vw 20vh 0px white, 30vw 15vh 2px white,
|
||||
16vw 5vh 2px white, 24vw 10vh 0px white, 32vw 40vh 0px white,
|
||||
33vw 35vh 2px white, 12vw 38vh 2px white, 24vw 10vh 0px white,
|
||||
33vw 5vh 2px white, 20vw 10vh 0px white, 80vw 10vh 2px white,
|
||||
62vw 20vh 0px white, 60vw 15vh 2px white, 70vw 7vh 0px white,
|
||||
62vw 50vh 0px white, 65vw 35vh 2px white, 64vw 10vh 0px white,
|
||||
85vw 2vh 0px white, 92vw 40vh 0px white, 75vw 35vh 2px white,
|
||||
90vw 10vh 0px white;
|
||||
opacity: 0.3;
|
||||
animation: glitter 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes glitter {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.titleview {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.titleview a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 15%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttonrow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, 0%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttonrow a{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer{
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: translate(0%, 0%);
|
||||
}
|
||||
.footer a{
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.footer a {
|
||||
margin: auto 5px;
|
||||
}
|
||||
}
|
||||
.navbutton{
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
border-radius: 15%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #09ff00;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
border: 5px solid #b533b3;
|
||||
background-color: #a684cb;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
padding: 5px 20px 5px 20px;
|
||||
animation: border-flicker 2s linear infinite;
|
||||
}
|
||||
.button:nth-child(1) { animation-duration: 2s; }
|
||||
.button:nth-child(2) { animation-delay: 1s; animation-duration: 4s; }
|
||||
.button:nth-child(3) { animation-duration: 3s; }
|
||||
|
||||
button span {
|
||||
font-family: "Montserrat";
|
||||
font-weight: 900;
|
||||
font-size: calc(10px + 1vh);
|
||||
letter-spacing: 5px;
|
||||
animation: text-flicker 3s linear infinite;
|
||||
}
|
||||
|
||||
button #offset {
|
||||
animation: letter-flicker 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes text-flicker {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
2% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
8% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
9% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
12% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0.3;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
72% {
|
||||
opacity: 0.2;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
77% {
|
||||
opacity: 0.9;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.9;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes border-flicker {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
2% {
|
||||
opacity: 1;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
4% {
|
||||
opacity: 0.1;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
8% {
|
||||
opacity: 1;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes background-flicker {
|
||||
0% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
||||
}
|
||||
|
||||
2% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.178);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
|
||||
}
|
||||
|
||||
4% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.685);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
|
||||
}
|
||||
|
||||
8% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.486);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgb(16, 135, 232);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.658);
|
||||
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
|
||||
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes letter-flicker {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
2% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
4% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
19% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
21% {
|
||||
opacity: 0.1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
23% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
83% {
|
||||
opacity: 0.4;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
|
||||
87% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.outrun {
|
||||
font-family: "Road Rage";
|
||||
font-weight: normal;
|
||||
font-size: calc(30px + 3vh);
|
||||
}
|
||||
.outrun.small {
|
||||
font-family: "Road Rage";
|
||||
font-weight: normal;
|
||||
font-size: calc(30px + 1vh);
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.outrun {
|
||||
font-family: "Road Rage";
|
||||
font-weight: normal;
|
||||
font-size: calc(20px + 3vh);
|
||||
}
|
||||
.outrun.small {
|
||||
font-family: "Road Rage";
|
||||
font-weight: normal;
|
||||
font-size: calc(10px + 1vh);
|
||||
}
|
||||
}
|
||||
|
||||
.glow {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
-webkit-animation: glow 1s ease-in-out infinite alternate;
|
||||
-moz-animation: glow 1s ease-in-out infinite alternate;
|
||||
animation: glow 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
||||
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
||||
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
||||
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
||||
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
||||
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
||||
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
.chrome {
|
||||
font-family: "Montserrat";
|
||||
font-weight: 900;
|
||||
background-image: linear-gradient(
|
||||
#2989cc 0%,
|
||||
#d3e5ec 50%,
|
||||
#592451 51%,
|
||||
#b3628d 55%,
|
||||
#592451 59%,
|
||||
#b3628d 65%,
|
||||
#ac86a6 75%,
|
||||
#b3628d 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
.chrome.large {
|
||||
font-size: calc(30px + 15vh);
|
||||
font-size: 100%;
|
||||
font-size: 15vw;
|
||||
}
|
||||
.chrome.medium {
|
||||
font-size: calc(30px + 10vh);
|
||||
font-size: 100%;
|
||||
font-size: 10vw;
|
||||
}
|
||||
.chrome.small {
|
||||
font-size: calc(30px+7vh);
|
||||
font-size: 100%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.chrome.large {
|
||||
font-size: calc(20px + 5vh);
|
||||
}
|
||||
.chrome.medium {
|
||||
font-size: calc(20px + 3vh);
|
||||
}
|
||||
.chrome.small {
|
||||
font-size: calc(20px + 1vh);
|
||||
}
|
||||
}
|
||||
|
||||
.chrome:before {
|
||||
content: attr(data-text);
|
||||
text-shadow: -1px -1px 1px #2989cc, -2px -2px 1px #2989cc,
|
||||
-3px -3px 1px #2989cc, 1px 1px 1px #000, 0px -1px 2px #000,
|
||||
-1px -2px 2px #000, 0 0 5px rgba(255, 255, 255, 1);
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.shine:after {
|
||||
content: attr(data-text);
|
||||
background-image: linear-gradient(
|
||||
225deg,
|
||||
transparent 53%,
|
||||
white 55%,
|
||||
transparent 58%
|
||||
);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
z-index: 999;
|
||||
background-size: 400% 400%;
|
||||
animation: shine 10s ease infinite;
|
||||
animation-delay: var(--shine-delay, 0s);
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0% 51%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 51%;
|
||||
}
|
||||
}
|
||||
|
||||
.spark {
|
||||
margin-top: calc(4vh);
|
||||
margin-left: -0.3em;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
width: 37px;
|
||||
height: 45px;
|
||||
z-index: 999;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='120 250 1700 1200' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='182' y='-1' x='-1'/%3E%3Cg display='none' overflow='visible' y='0' x='0' height='100%25' width='100%25' id='canvasGrid'%3E%3Crect fill='url(%23gridpattern)' stroke-width='0' y='0' x='0' height='100%25' width='100%25'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cellipse ry='183' rx='5' id='svg_2' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse transform='rotate(90 274.50000000000006,197.03750610351565) ' ry='183' rx='5' id='svg_3' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(126.69925689697266 276.19342041015625,195.4363708496094) ' ry='90.194158' rx='3.223029' id='svg_4' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(-134.6077117919922 276.19342041015625,195.43637084960938) ' ry='90.194158' rx='3.223029' id='svg_5' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
|
||||
filter: blur(0.5px);
|
||||
transform: scale(0);
|
||||
animation: blip 5s infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.chrome:last-of-type .spark {
|
||||
animation-delay: -2.5s;
|
||||
}
|
||||
|
||||
@keyframes blip {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
5% {
|
||||
transform: scale(1.2) rotate(0deg);
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes blip {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
5% {
|
||||
transform: scale(1.2) rotate(0deg);
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blip {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
5% {
|
||||
transform: scale(1.2) rotate(0deg);
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user