鼠标进入缩放

转身_learner

已于 2022-06-20 23:32:11 修改

阅读量60

点赞数

文章标签： css html html5

于 2021-09-04 16:09:56 首次发布

本文链接：https://blog.csdn.net/weixin_47818125/article/details/120101440

版权

鼠标进入缩放

根据transform: scale(1.4);属性进行样式控制，从而实现进行缩放功能，

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box .children {
        width: 100px;
        height: 100px;
        background: skyblue;
        line-height: 100px;
        text-align: center;
    }

    .box .children:hover {
        transform: scale(1.4);
    }
</style>

<body>
    <div class="box">
        <div class="children">
            <span>缩放</span>
        </div>
    </div>
</body>