Text Animation

HTML _CSS

Text Animation

HiroDaegu 2023. 2. 24. 23:11

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>TEXT ANIMATION</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <h2 style="--i:0;">CSS IS AWESOME</h2>
        <h2 style="--i:1;">CSS IS AWESOME</h2>
        <h2 style="--i:2;">CSS IS AWESOME</h2>
        <h2 style="--i:3;">CSS IS AWESOME</h2>
        <h2 style="--i:4;">CSS IS AWESOME</h2>
        <h2 style="--i:5;">CSS IS AWESOME</h2>
        <h2 style="--i:6;">CSS IS AWESOME</h2>
        <h2 style="--i:7;">CSS IS AWESOME</h2>
        <h2 style="--i:8;">CSS IS AWESOME</h2>
        <h2 style="--i:9;">CSS IS AWESOME</h2>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #222;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    position: relative;
    display: flex;
    flex-direction: column;
}

.box h2 {
    font-size: 2.25em;
    -webkit-text-stroke: 1px #F00;
    color: transparent;
    line-height: 1em;
    letter-spacing: 0.05em;
    animation: animate 2.5s linear infinite;
    animation-delay: calc(var(--i) * 0.25s);
}

@keyframes animate {
    0%, 10% {
        color: #F00;
        filter: hue-rotate(0);
    }
    10.000001% {
        color: transparent;
    }
    100% {
        color: transparent;
        filter: hue-rotate(720deg);
    }
}

728x90

LIST