【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

韩曙亮

发布于 2023-10-11 20:22:12

24100

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、需求分析

默认状态下 , 界面中显示一张图片 :

当鼠标移动到图片上时 , 显示如下效果 , 其中图片是逐渐放大的 , 有一个过渡 :

二、代码分析

上述盒子模型布局结构如下 , div 是外层父容器 , a 标签用于设置链接 , img 标签用于显示图片 ;

    <div>
        <a href="#"><img src="images/pic.jpg" alt=""></a>
    </div>

上述图片 , 即使放大后 , 也没有超出父容器 div 盒子模型的边界 , 因此这里需要设置超出边界外的内容需要隐藏 , 父容器需要设置 overflow: hidden 样式 ;

            /* 隐藏边界之外的元素 图片放大后不要超出边界 */
            overflow: hidden;

放大需要一个过程 , 这里将放大操作的过渡动画时长 , 设置为 1 秒 ;

        div img {
            /* 设置过渡动画 */
            transition: all 1s;
        }

鼠标移动到图片上方后 , 放大 , 这里使用伪类选择器 div img:hover , 设置鼠标移动到 div img 标签上的样式 ;

        div img:hover {
            /* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
            /* 鼠标移动上去后  */
            transform: scale(1.2);
        }

三、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 2D 转换 - scale 缩放</title>
    <style>
        div {
            /* 设置浮动 令 div 从左到右排列 */
            float: left;
            /* 设置外边距 */
            margin: 10px;
            /* 隐藏边界之外的元素 图片放大后不要超出边界 */
            overflow: hidden;
        }
        
        div img {
            /* 设置过渡动画 */
            transition: all 1s;
        }
        
        div img:hover {
            /* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
            /* 鼠标移动上去后  */
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="images/pic.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="images/pic.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="images/pic.jpg" alt=""></a>
    </div>
</body>

</html>