81 lines
1.1 KiB
CSS
81 lines
1.1 KiB
CSS
body {
|
|
background: linear-gradient(-249deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
|
background-size: 400% 400%;
|
|
animation: gradient 10s linear infinite;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.person-button {
|
|
transition: transform 5.5s linear;
|
|
}
|
|
|
|
|
|
h1 {
|
|
position: relative;
|
|
font-family: "Poppins", sans-serif;
|
|
color: #f6d8d5;
|
|
font-size: 50px;
|
|
opacity: 0.9;
|
|
text-shadow: 0px -5px #ec2225, 0px 5px #00c2cb, -5px 0px #ec2225, 5px 0px #00c2cb;
|
|
}
|
|
|
|
h1::before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
color: #e0ffff;
|
|
z-index: -1;
|
|
animation: animate 12ms ease-in-out infinite;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes animate {
|
|
|
|
0%,
|
|
100% {
|
|
top: -7px;
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
top: 0;
|
|
left: -10px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
40% {
|
|
top: 7px;
|
|
left: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
60% {
|
|
top: 0;
|
|
left: 10px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
80% {
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.9;
|
|
}
|
|
}
|