css3 scale实现放大缩小

最新推荐文章于 2024-03-20 13:20:19 发布

大西瓜啃完了哟

最新推荐文章于 2024-03-20 13:20:19 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/haihiaandtongtong/article/details/46740937

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>放大缩小</title>
    <style>
        .muted{width: 100%;height: 100%;}
        .muted .muted_m{display:block;width: 100px; height: 100px; margin: 100px auto 0 auto; background: url("../../prompt-icon.png") no-repeat; }
        .muted .muted_m{
            animation: muted-zoom 2s;
            -webkit-animation: muted-zoom 2s;
            animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
        }

        @keyframes muted-zoom {
            from {
                transform: scale(0);
                opacity:0;
            }
            to {
                transform: scale(1);
                opacity:1;

            }
        }

    </style>
</head>
<body>
<div class="muted">
    <div class="muted_m"> </div>
</div>
</body>
</html>