手把手教您学习CSS的scale属性

与风过山岗

已于 2024-04-20 16:03:49 修改

阅读量788

点赞数 8

分类专栏：前端开发文章标签： css 前端

于 2024-04-20 14:10:04 首次发布

本文链接：https://blog.csdn.net/weixin_54454406/article/details/137998051

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是scale？

就是改变元素的尺寸。

书写格式：

transform:scale(X轴缩放的倍数，Y轴缩放的倍数);

注意：一般情况下，我们只输入一个值，表示X轴和Y轴等比例缩放。

transform:scale(缩放倍数);

scale值大于1表示放大，scale值小于1表示缩小。

代码演示：

效果：

盒子静止状态：

鼠标放上去后的状态，我们可以看到盒子放大了。同理设置0-1的值可以缩小。

<!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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            margin: 150px auto;
            transition: all .3s;
        }

        /* scale一般配合hover使用 */
        .box:hover {
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="box">
        演示scale   
    </div>
</body>
</html>

如果只是改变尺寸，为什么不直接改变width和height呢？

其实我们通过上面的案例可以看出，scale缩放可以缩放盒子内部的元素，比如文字图片之类的，如果只是改变width和height的值，则无法达到这样的效果。

使用scale做一个缩放播放效果案例

屏幕录制 2024-04-20 135800

在这里笔者把素材放在网页上，大家可以自行下载，以供大家学习使用。

步骤一：想设置父盒子，摆放里面的元素。

<!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>Document</title>
    <style>
        .box {
            /* 设置盒子的属性 */
            width: 300px;
            height: 150px;
            margin: 100px auto;
            /* 设置背景图片 */
            background: url(./th.jpg) no-repeat;
            /* 让里面的元素垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./play.png" alt="">
    </div>
</body>
</html>

步骤二：让播放按钮放到最大。把它隐藏了，外部隐藏和内部隐藏。

<!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>Document</title>
    <style>
        .box {
            /* 设置盒子的属性 */
            width: 300px;
            height: 150px;
            margin: 100px auto;
            /* 设置背景图片 */
            background: url(./th.jpg) no-repeat;
            /* 让里面的元素垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 溢出的部分隐藏 */
            overflow: hidden;
            
        }
        img {
            /* 让播放按钮放到最大 */
            transform: scale(7);
            /* 自身看不见 0完全透明 1：出现 */
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./play.png" alt="">
    </div>
</body>
</html>

步骤三：实现最后的效果。

<!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>Document</title>
    <style>
        .box {
            /* 设置盒子的属性 */
            width: 300px;
            height: 150px;
            margin: 100px auto;
            /* 设置背景图片 */
            background: url(./th.jpg) no-repeat;
            /* 让里面的元素垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 溢出的部分隐藏 */
            overflow: hidden;
            
        }

        img {
            /* 让播放按钮放到最大 */
            transform: scale(7);
            /* 自身看不见 0完全透明 1：出现 */
            opacity: 0;
            transition: all .5s;
        }

        /* 鼠标经过盒子，按钮放大缩小 */
        .box:hover img {
            transform: scale(1);
            opacity: 1;
        }
        
    </style>
</head>
<body>
    
    <div class="box">
        <img src="./play.png" alt="">
    </div>

</body>
</html>

注意：本篇文章是笔者的学习笔记，因为笔者的能力有限，如果您在浏览或者阅读的时候发现了问题，还请您在评论区留言，笔者看到后会在第一时间解决，谢谢。