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