当前位置：网站首页>reduce函数构建炫耀字体，字体动画。

reduce函数构建炫耀字体，字体动画。

2022-07-19 12:08: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] //获取文本内容
        console.log(arrDiv)

        arrDiv.reduce((pre, cur, index) => { //reduce方法循环
            if (pre === index) {
                divs.innerHTML = ''
            }
            let span = document.createElement("span")//获取拆分后的文本添加标签

            span.innerHTML = cur
            divs.appendChild(span)
            span.addEventListener("mouseover", () =>
                span.classList.add("color"),
                console.log(pre, cur)
            )
            // 监听动画结束 移除类
            span.addEventListener("animationend", function () {
                span.classList.remove("color")
            })

        }, 0)
    }

</script>

</html>

特别感谢后盾人，学习更多前端知识请登录后盾人

原网站

版权声明
本文为[Jason–json]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_46146313/article/details/125866980

边栏推荐

猜你喜欢

随机推荐