CSS
body {
margin: 0;
height: 100vh;
font-family: Monospace, Arial;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}
span {
position: relative;
display: inline-block;
vertical-align: top;
color: transparent;
white-space: nowrap;
font-size: 48px;
line-height: 2em;
}
span:before {
content: 'Hello';
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
text-indent: 0;
color: white;
}
span:hover {
animation: show .8s linear forwards;
}
@keyframes show {
93% {
color: transparent;
}
94% {
color: white;
}
100% {
color: white;
}
}
span:hover:before {
animation: texte .8s linear forwards;
}
@keyframes texte {
0 {
content: '4@,3SAscAi;9,bT4';
}
10% {
content: '$R6?4dSj{qS<7Yh7';
}
20% {
content: '+BDs73f;[u3^4Lgg';
}
30% {
content: '{qS<7Yh7+BDs73f;';
}
50% {
content: 'Ai;9,bT4$R6?4dSj';
}
60% {
content: '[o3^4LggAi;9,bT4';
}
70% {
content: 'qoj4BWy-?4dSj{qS';
}
80% {
content: 'GonQ5Tye4LggAi;s';
}
90% {
content: 'Go3d4<yecAi;9,bT';
}
100% {
content: '';
}
}
p {
position: absolute;
bottom: 10px;
left: 20px;
}
