利用reduce实现文字LOGO效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51664705/article/details/114979226

<style> 
    *{padding: 0;margin: 0;}
    body{
        width: 100vw;//vw,vh会适配显示空间的大小，会跟随页面的增减而改变。
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #34495e;
    }
    div{
        font-size: 5em;
        font-weight: bold;
        text-transform: uppercase;
        color: #9b59b6;
    }
    div>span{
        position: relative;
        display: inline-block;
    }
    .color{
        animation: color;
        animation-duration: 1s;
        animation-iteration-count: 2;
        animation-timing-function: linear;
        animation-direction:alternate ;
    }
        @keyframes color{
            50%{
                color:#f1c40f;
                transform:scale(2);
            }
            100%{
                color:#f1c40f;
                transform:scale(0.5)
            }
        }
    </style>
<body >  
    <span></span>
    <div>houdunren.com</div>
    <script>
            const div = document.querySelector("div");//获取div
            [...div.textContent].reduce(function(pre,cur,index){
                pre == index && (div.innerHTML="");//使当前获取div的内容上一个字符消失。
                let span = document.createElement('span');//创建span标签。
                span.innerHTML =cur;//span标签的内容等于当前获取的字符。
                div.appendChild(span);
                span.addEventListener("mouseover",function(){
                    this.classList.add("color");//classList.add  添加新的类名
                })
                span.addEventListener("animationend",function(){
                    this.classList.remove("color");//当动画执行过后，取出它得name。
                })
            },0)
    </script>