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

要求：

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

分析：

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

    然后使用 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('')
}