95 lines
3.0 KiB
CSS
95 lines
3.0 KiB
CSS
html, body { background: hsl(220, 80%, 8%); }
|
|
html { height: 100%; display: flex; }
|
|
body { margin: auto; }
|
|
|
|
.title {
|
|
position: relative;
|
|
text-align: center;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.title .text {
|
|
font-family: sans-serif;
|
|
font-weight: 400;
|
|
font-size: calc(20vw / var(--word-total) );
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.title .write .word {
|
|
color: hsl(0, 0%, 80%);
|
|
text-shadow: 0 0 0.1em currentColor;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-animation: write linear both;
|
|
animation: write linear both;
|
|
}
|
|
|
|
.title .laser {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* To avoid the blur getting masked by the clip-path we had to duplicate the element */
|
|
-webkit-filter: blur(4px) contrast(10);
|
|
filter: blur(4px) contrast(10);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.title .laser .word {
|
|
display: inline-block;
|
|
}
|
|
|
|
.title .laser .word {
|
|
color: hsl(0, 100%, 75%);
|
|
text-shadow: 0 0 0.1em currentColor;
|
|
-webkit-transform: translateZ(5px);
|
|
transform: translateZ(5px);
|
|
-webkit-animation: laser linear both;
|
|
animation: laser linear both;
|
|
}
|
|
|
|
.title .write .word,
|
|
.title .laser .word {
|
|
-webkit-animation-duration: 4s;
|
|
animation-duration: 4s;
|
|
-webkit-animation-delay: calc(0.3s + var(--word-index) * 160ms);
|
|
animation-delay: calc(0.3s + var(--word-index) * 160ms);
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.title:hover .word,
|
|
.title:hover .word {
|
|
-webkit-animation-play-state: paused;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* .title .text .word,
|
|
.title .text .word::before {
|
|
animation-play-state: paused;
|
|
animation-delay: -0.4s;
|
|
} */
|
|
|
|
@-webkit-keyframes write {
|
|
from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
|
|
70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
|
|
}
|
|
|
|
@keyframes write {
|
|
from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
|
|
70%, to { -webkit-clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%); clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
|
|
}
|
|
|
|
@-webkit-keyframes laser {
|
|
from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
|
|
70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
|
|
}
|
|
|
|
@keyframes laser {
|
|
from, 30% { -webkit-clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%); clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
|
|
70%, to { -webkit-clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%); clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
|
|
}
|
|
|