利用reduce实现文字LOGO效果

最新推荐文章于 2022-07-24 14:54:03 发布

帅癌病患者

最新推荐文章于 2022-07-24 14:54:03 发布

阅读量64

点赞数

分类专栏： JavaScript笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51664705/article/details/114979226

版权

JavaScript笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<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>

帅癌病患者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用reduce实现文字LOGO效果

<style> *{padding: 0;margin: 0;} body{ width: 100vw;//vw,vh会适配显示空间的大小，会跟随页面的增减而改变。 height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #34495e; }
复制链接

扫一扫

专栏目录