es6中的常见用法之扩展运算符的实例教学(4)

bohn

于 2019-07-15 20:05:39 发布

阅读量229

点赞数 1

分类专栏： js 文章标签： js es6 扩展运算符

本文链接：https://blog.youkuaiyun.com/qq_39458856/article/details/96012764

版权

js 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用CSS实现文字放大效果的方法，并通过JavaScript动态地将文本转换为可独立操作的元素，使得每个字母都能响应鼠标悬停事件并产生动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说直接来个实例：

点击图片中的字母字母会出现放大的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .h1{
            font-size: 200px;
            color: darkorange;
            text-shadow:  3px 3px 0 rgba(0,0,0,0.7);
        }
        .h1 span{
            transition: all 0.5s;
          //这里需要将元素设置为行内块级元素因为transform之能应用于块级或者行内块级元素
            display: inline-block;
        }
        .h1 span:hover{
            /*font-size: 300px;*/
            transform: translateY(-20px) rotate(10deg)
        scale(2);
        }
    </style>
</head>
<body>
    <h2 CLASS="h1">LIU.BOHN</h2>
    <script>
        let h2=document.querySelector(".h1");
        let word=[...h2.textContent];
        function fun1() {
            return word.map(x=>`<span>${x}</span>`).join("")
        }
        console.log(fun1());
        h2.innerHTML=fun1();
        //如以下例子扩展运算符可以不用遍历就操作数组中的元素
        let arr1=[1,2,3];
        let arr2=["a","b","c"];
        arr1.push(...arr2);
        let data=[1992,7,10]
        let data2=new Date(...data);
        console.log(data2);
    </script>
</body>
</html>