使用ES6的扩展运算符实现滑过字符变化样式

最新推荐文章于 2023-02-21 10:35:35 发布

原创最新推荐文章于 2023-02-21 10:35:35 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #扩展运算符

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

要求：

鼠标滑动页面上的字符串时，指向的字符样式变大，倾斜一定角度。

分析：

将字符串用扩展运算符扩展为一个新的参数序列；

然后使用 map 方法将每个字符包含在<span>标签中；

css 为<span>中的字符添加样式。

效果预览：

css：

body{
        background:#ffff00;
    }
    .heading{
        width:auto;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        font-size: 50px;
        color:#fff;
        text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    }
    .heading span{
        cursor: pointer;
        display: inline-block;
        transition: transform 0.25s;
    }
    .heading span:hover{
        transform:translateY(-20px) rotate(10deg) scale(2);
    }

HTML：

<h2 class="heading">HELLO~ES6!</h2>

JavaScript：

const heading=document.querySelector('.heading');
heading.innerHTML=wrapWithSpan(heading.textContent);
function wrapWithSpan(word){
    return [...word].map(letter=>`<span>${letter}</span>`).join('')
}