九、css3的2D变换+过渡+js实现鼠标停留放缩渐变效果叠加

本文介绍如何使用CSS transform属性实现元素放缩效果，并结合transition属性制作平滑过渡。进一步展示如何添加不透明度渐变，实现鼠标悬停时元素放大并逐渐透明的效果。

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

一、知识点

1. transform属性的变换方法：

translate(左移x ,上移y) 从元素的当前位置开始向x正轴，y正轴移动；

rotate(旋转角度deg) 从元素的当前角度旋转，正值顺时针，负值逆时针，deg为角度单位；

scale(x轴倍数 , y轴倍数) 相对于当前大小缩放的的倍数，1为当前大小；

skew(x轴变换角度deg,y轴变换角度deg) 以x，y轴扭曲；

2. transition过渡属性：

transition: transition-property（要添加效果的CSS属性）transition-duration（完成时长）；

这2个属性值是过渡效果的必要条件；

可以同时一个元素添加多个过渡效果，用都号把每组效果隔开即可(属性+时长=一组)；

另外还有非必要属性：

transition-timing-function: 时间曲线,取值

transition-delay: 效果开始时间，即延时;

二、放缩效果实现demo

1.html+css写好这样一个盒子

2.利用transform:scale(1.2);让盒子放大为原尺寸的1.2倍(宽高放大倍数一致时可省略)

这样显示出来的是已经放大了1.2倍的盒子；

3.将transform:scale(1.2);写到伪类选择器内，就可以实现鼠标悬停才放大的效果

修改样式为：

现在已经实现了鼠标停留放大，离开返回原值，即放大效果，但是效果特别生硬；

4.添加过渡属性transition使放大效果自然；

修改样式为：

也可以写为transition:transform 3s;

放大效果就已经实现了，缩小只需更改scale的值即可；通过用于鼠标停留时图片，字体的放大缩小效果；

二、鼠标悬停时的渐变+放大效果:

渐变只需将变换属性更改为不透明属性opacity,取值0~1,1表示完全不透明；

这样就实现了鼠标停留放大淡出效果；

其他方法和属性的使用也是一样的；

三、效果叠加：当需要给一张图片鼠标停留放缩且为其增加表面覆盖渐变显示文字的效果，这时由于hover只能用于子元素，但图片和表面覆盖的颜色渐变显示文字效果是同级关系，所以无法只用css3实现同时实现2个效果；即实现鼠标悬停从左边到右边的效果

这里放大效果即底层的效果用js可以实现：

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放缩渐变效果demo</title>
    <style>
        .box1{
            width: 380px;
            height: 240px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .box1>img{
            max-width: 100%;
            transition: transform 3s;
        }
        .cover>img:hover{
            transform: scale(1.2);
        }
        .cover{
            width: 380px;
            height: 240px;
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 1s;
        }
        .cover>p{
            font-size: 30px;
            color: white;
            position: absolute;
            top: 30px;
            left: 80px;
        }
        .cover:hover{
            opacity: 0.7;
        }
    </style>
</head>
<body>
<div class="box1">
    <img id="img" src="solve4.jpg" alt="">
    <div class="cover" onmouseover=" mouse()" onmouseout="out()">
        <p>植物大战僵尸</p>
    </div>
    <script>
        var img=document.getElementById('img');//获取底层图片

        function mouse() { //鼠标悬停时放大
            img.style.transform='scale(1.1)';
            img.style.transition='all,1s';
        }
        function out() { //离开时返回原值
            img.style.width='385px';
            img.style.transform='scale(1)';
        }
    </script>
</div>
</body>
</html>