87 lines
1.7 KiB
CSS
87 lines
1.7 KiB
CSS
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ckl {
|
|
background-image: url("ckl.jpg");
|
|
height: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "neon";
|
|
src: url("neon.ttf");
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
.container {
|
|
display: block;
|
|
position: fixed;
|
|
top: 7em; left: 0em;
|
|
}
|
|
|
|
.neon {
|
|
font-family: neon;
|
|
color: #FB4264;
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
text-shadow: 0 0 3vw #F40A35;
|
|
}
|
|
|
|
.flux {
|
|
font-family: neon;
|
|
color: #426DFB;
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
text-shadow: 0 0 3vw #2356FF;
|
|
}
|
|
|
|
.neon {
|
|
animation: neon 1s ease infinite;
|
|
-moz-animation: neon 1s ease infinite;
|
|
-webkit-animation: neon 1s ease infinite;
|
|
}
|
|
|
|
@keyframes neon {
|
|
0%,
|
|
100% {
|
|
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
|
|
color: #FED128;
|
|
}
|
|
50% {
|
|
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
|
|
color: #806914;
|
|
}
|
|
}
|
|
|
|
.flux {
|
|
animation: flux 2s linear infinite;
|
|
-moz-animation: flux 2s linear infinite;
|
|
-webkit-animation: flux 2s linear infinite;
|
|
-o-animation: flux 2s linear infinite;
|
|
}
|
|
|
|
@keyframes flux {
|
|
0%,
|
|
100% {
|
|
text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
|
|
color: #28D7FE;
|
|
}
|
|
50% {
|
|
text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
|
|
color: #146C80;
|
|
}
|
|
}
|
|
|
|
/*
|
|
https://freefrontend.com/css-glow-text-effects/
|
|
https://codepen.io/Trinca/pen/NAvpWa
|
|
*/
|