当前位置：网站首页>The reduce function builds flaunting fonts and font animations.

The reduce function builds flaunting fonts and font animations.

2022-07-20 15:12:00 【Jason–json】 

<!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">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        body {
            width: 300vh;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #34495e;
        }
        div {
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
            color: #9b599b;
        }

        div>span {
            position: relative;
            display: inline-block;
        }

        .color {
            animation-name: color;
            animation-duration: 1s;
            animation-iteration-count: 2;
            animation-timing-function: linear;
            animation-direction: alternate;
        }

        @keyframes color {
            50% {
                color: #f1c40f;
                transform: scale(2);
            }

            to {
                color: #e7c3ce;
                transform: scale(0.5);
            }
        }
    </style>
</head>

<body>
    <div>shihuayingkejishukejifazhanyouxiangongsi</div>

</body>
<script>
    {
        let divs = document.querySelector("div")
        // console.log(divs.textContent)
        let arrDiv = [...divs.textContent] // Get text content 
        console.log(arrDiv)

        arrDiv.reduce((pre, cur, index) => { //reduce Method cycle 
            if (pre === index) {
                divs.innerHTML = ''
            }
            let span = document.createElement("span")// Get the split text and add labels 

            span.innerHTML = cur
            divs.appendChild(span)
            span.addEventListener("mouseover", () =>
                span.classList.add("color"),
                console.log(pre, cur)
            )
            //  End of listening animation   Remove class 
            span.addEventListener("animationend", function () {
                span.classList.remove("color")
            })

        }, 0)
    }

</script>

</html>

Special thanks to the backers , For more front-end knowledge, please log in The backing people

原网站

版权声明
本文为[Jason–json]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191208263047.html

边栏推荐

猜你喜欢

随机推荐