CSS3鼠标滑过放大效果

最新推荐文章于 2025-05-17 12:59:03 发布

原创最新推荐文章于 2025-05-17 12:59:03 发布 · 9.7k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了一种使用纯CSS实现的鼠标悬停时元素自动放大的效果。通过设置:hover伪类结合transform属性，使元素在鼠标滑过时平滑过渡至1.4倍大小，增强了用户体验。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>鼠标滑过变大</title>
    <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                border: #000 solid 1px;
                margin: 50px auto;
                overflow: hidden;
                background-color:red;
            }
            div{
                cursor: pointer;/*鼠标变成手指样式*/
                transition: all 0.6s;/*所有属性变化在0.6秒内执行动画*/
            }
            div:hover{
                transform: scale(1.4);/*鼠标放上之后元素变成1.4倍大小*/

            }
        </style>
</head>
<body>
    <div></div>
</body>
</html>