首页 > 其他分享> > 前端学习笔记 - 移入图片让那个图片慢慢放大

前端学习笔记 - 移入图片让那个图片慢慢放大

2020-12-16 17:31:03 作者：互联网

返回目录

DOM

<body>
    <div class="box">
        <div class="img">
            图片
        </div>
    </div>
</body>

CSS

<style>
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        position: relative;
    }

    .img {
        width: 300px;
        height: 300px;
        background-color: red;
        font-size: 24px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        transform-origin: right center;
        animation: animate 3s linear;/*使用动画*/
    }

    /*图片的运动动画*/
    @keyframes animate {
        from {
            transform: scale(0);
            left: -110%;
        }
        to {
            transform: scale(1);
            left: 0;
        }
    }
</style>

结果

在这里插入图片描述

标签：center,transform,300px,height,width,笔记,移入,图片
来源： https://blog.csdn.net/qq_39090575/article/details/111295584