css 相关例子 #3

daisybaicai · 2019-12-05T11:09:08Z

No description provided.

daisybaicai · 2019-12-05T11:10:03Z

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css 切换文字动画</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #222;
        }

        .rotating-text {
            font-family: Lato, sans-serif;
            font-weight: 600;
            font-size: 36px;
            color: white;
            transform: translateX(-80px);
        }

        .rotating-text p {
            display: inline-flex;
            margin: 0;
            vertical-align: top;
        }

        .rotating-text p .word {
            position: absolute;
            display: flex;
            opacity: 0;
        }

        .rotating-text p .word .letter {
            transform-origin: center center 25px;
        }

        /* .rotating-text p .word .letter.out {
            transform: rotateX(90deg);
            transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
        } */

        .rotating-text p .word .letter.in {
            transition: 0.38s ease;
            transform: rotate(0);
        }

        .rotating-text p .word .letter.behind {
            transform: rotateX(-90deg);
        }

        .alizarin {
            color: #e74c3c;
        }

        .wisteria {
            color: #8e44ad;
        }

        .peter-river {
            color: #3498db;
        }

        .emerald {
            color: #2ecc71;
        }

        .sun-flower {
            color: #f1c40f;
        }
    </style>
</head>

<body>
    <div class="rotating-text">
        <p>CSS Animation is</p>
        <p>
            <span class="word alizarin">awesome.</span>
            <span class="word wisteria">beautiful.</span>
            <span class="word peter-river">creative.</span>
            <span class="word emerald">fabulous.</span>
            <span class="word sun-flower">interesting.</span>
        </p>
    </div>

    <script type="text/javascript">
        // 把每一个单词分开，变成一个个字母。
        var words = document.querySelectorAll(".word");
        words.forEach(function (word) {
            var letters = word.textContent.split("");
            word.textContent = "";
            letters.forEach(function (letter) {
                var span = document.createElement("span");
                span.textContent = letter;
                span.className = "letter";
                word.append(span);
            });
        });

        var currentWordIndex = 0;
        var maxWordIndex = words.length - 1;
        words[currentWordIndex].style.opacity = "1";
        var rotateText = function () {
            var currentWord = words[currentWordIndex];
            var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
            // rotate out letters of current word
            Array.from(currentWord.children).forEach(function (letter, i) {
                setTimeout(function () {
                    letter.className = "letter out";
                }, i * 80);
            });
            // reveal and rotate in letters of next word
            nextWord.style.opacity = "1";
            Array.from(nextWord.children).forEach(function (letter, i) {
                letter.className = "letter behind";
                setTimeout(function () {
                    letter.className = "letter in";
                }, 340 + i * 80);
            });
            currentWordIndex =
                currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
        };
        // rotateText();
        // setInterval(rotateText, 4000);

    </script>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css 相关例子 #3

css 相关例子 #3

daisybaicai commented Dec 5, 2019

daisybaicai commented Dec 5, 2019

css 相关例子 #3

css 相关例子 #3

Comments

daisybaicai commented Dec 5, 2019

daisybaicai commented Dec 5, 2019