Fri Jul 22 2022
Animated 3D Text
CSS5533 views
File Name: 3d-dancing-text-animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<title>3D Animated Text</title>
<style>
* {
font-family: 'Russo One', sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: #d0d0d0;
}
section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
ul {
display: flex;
list-style: none;
}
ul li {
font-size: 80px;
color: #f5f5f5;
text-shadow: #fff 0.006em 0.006em 0.007em,
#9c9c9c 1px 1px 1px,
#9c9c9c 1px 2px 1px,
#9c9c9c 1px 3px 1px,
#9c9c9c 1px 4px 1px,
#9c9c9c 1px 5px 1px,
#9c9c9c 1px 6px 1px,
#9c9c9c 1px 7px 1px,
#9c9c9c 1px 8px 1px,
#9c9c9c 1px 9px 1px,
#9c9c9c 1px 10px 1px,
#9c9c9c 1px 11px 1px,
#9c9c9c 1px 12px 1px,
rgba(16,16,16,0.4) 1px 18px 6px,
rgba(16,16,16,0.4) 1px 22px 10px,
rgba(16,16,16,0.4) 1px 26px 35px,
rgba(16,16,16,0.4) 1px 30px 65px,
#fff -0.5em -0.1em 100px
;
animation: ani 1s infinite ease-in-out;
animation-delay: calc(.1s * var(--i));
}
@keyframes ani {
0%, 100% {
margin-top: 0;
text-shadow: #fff 0.006em 0.006em 0.007em,
#9c9c9c 1px 1px 1px,
#9c9c9c 1px 2px 1px,
#9c9c9c 1px 3px 1px,
#9c9c9c 1px 4px 1px,
#9c9c9c 1px 5px 1px,
#9c9c9c 1px 6px 1px,
#9c9c9c 1px 7px 1px,
#9c9c9c 1px 8px 1px,
#9c9c9c 1px 9px 1px,
#9c9c9c 1px 10px 1px,
#9c9c9c 1px 11px 1px,
#9c9c9c 1px 12px 1px,
rgba(16,16,16,0.4) 1px 18px 6px,
rgba(16,16,16,0.4) 1px 22px 10px,
rgba(16,16,16,0.4) 1px 26px 35px,
rgba(16,16,16,0.4) 1px 30px 65px,
#fff -0.5em -0.1em 100px;
}
50% {
margin-top: -20px;
text-shadow: #fff 0.006em 0.006em 0.007em,
#9c9c9c 1px 1px 1px,
#9c9c9c 1px 2px 1px,
#9c9c9c 1px 3px 1px,
#9c9c9c 1px 4px 1px,
#9c9c9c 1px 5px 1px,
#9c9c9c 1px 6px 1px,
#9c9c9c 1px 7px 1px,
#9c9c9c 1px 8px 1px,
#9c9c9c 1px 9px 1px,
#9c9c9c 1px 10px 1px,
#9c9c9c 1px 11px 1px,
#9c9c9c 1px 12px 1px,
rgba(16,16,16,0.4) 1px 38px 26px,
rgba(16,16,16,0.4) 1px 42px 30px,
rgba(16,16,16,0.4) 1px 46px 65px,
rgba(16,16,16,0.4) 1px 50px 95px,
#fff -0.5em -0.1em 100px;
}
}
</style>
</head>
<body>
<section>
<ul>
<li style="--i:1">G</li>
<li style="--i:2">e</li>
<li style="--i:3">e</li>
<li style="--i:4">k</li>
<li style="--i:5">b</li>
<li style="--i:6">o</li>
<li style="--i:7">o</li>
<li style="--i:8">t</li>
<li style="--i:9">s</li>
</ul>
</section>
</body>
</html>Result Screenshot(s)
Author:Geekboots