扩展运算符小练习（融入：过渡（transition）、变形（ transform）一些css3效果）

约定不等于承诺〃 2021-12-16 14:17 129阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>扩展运算符小练习</title>
        <style>
        .heading{
            width: 100%;
            height:200px;
            text-align: center;
            font-size:6rem;
            background-color: yellow;
            color:white;
        }
        .heading span{
            display: inline-block;
            cursor: pointer;/*鼠标手*/
            transition: transform 0.27s;/*过渡和变形，大家有时间可以研究一下，后面我也会出一些简单的案例*/
        }
    
        .heading span:hover{
            transform: translate(-20px) rotate(10deg) scale(2);/*变形：	定义 2D 转换(x,y)  定义 2D 旋转，在参数中规定角度(10deg)  定义 2D 缩放转换(x,y)。*/
        }
        </style>
    </head>
    <body>
        <h2 class="heading">XYZ&&LM</h2>
        <script>
            /*
            join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。
            如果数组只有一个项目，那么将返回该项目而不使用分隔符。
    
            文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 
            如果找不到匹配项，则返回null。
    
            Node.textContent 属性表示一个节点及其后代的文本内容。
    
            Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
            */
            const heading=document.querySelector('.heading');
            heading.innerHTML=wrapWithSpan(heading.textContent);
    
            function wrapWithSpan(word){
                return [...word].map(letter=>
                `<span>${letter}</span>`
                ).join('')
            }
        </script>
    </body>
    </html>