提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

动画CSS 实现 示例 效果 div 缩放
2023-09-11 14:15:11 时间 

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

相关文章