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

最新推荐文章于 2021-10-19 19:15:24 发布

&XYZ&

最新推荐文章于 2021-10-19 19:15:24 发布

阅读量278

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/94773205

版权

ES6 专栏收录该内容

40 篇文章 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>