Fri Jul 22 2022

Animated 3D Text

CSS5343 views

Animated 3D Text

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)

Animated 3D TextWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.