【css】css中实现DIV动画缩放效果（示例）

原创

敦厚的曹操 2022-05-24 19:01:13 博主文章分类：5.【css】 ©著作权

文章标签 css 动画 javascript 缩放 html 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者敦厚的曹操的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!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>

</head>
<style>
    body {
        background-color: rgb(223, 223, 223);
    }

    .list {
        margin-top: 50px;
        margin-left: 50px;
        background-color: rgb(29, 156, 29);
        width: 150px;
        height: 150px;
        transition: 0.5s;   /* 缩放动画特效时间*/
        text-align: center;
        color: white;
        line-height: 140px;
        overflow: hidden;
        /* 默认隐藏 */
    }

    /* 鼠标移入，缩放 */
    /*
        scalex()水平方向缩放
        scaley()垂直方向缩放
        scale()双方向缩放
    */
    .list:hover {
        transform: scale(1.2);      /* 以1为单位放大和缩小 */
    }

.picture{

    margin-top: 50px;
        margin-left: 50px;
        width: 550px;
        height: 350px;
        transition: 0.5s;
        text-align: center;
        color: white;
        line-height: 340px;
        background-color: rgb(233, 135, 135);
      

}
    .img {
        width: 100%;
        height: 100%;
    }

    .picture:hover{
        transform: scale(2);
        /* 以1为单位放大和缩小 */
    }
</style>

<body>

    <div class="list"> 缩放动画效果 </div>


    <div class="picture">
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png">
    </div>

</body>

</html>