前端（二）：CSS实现缩放动画效果

幺白幺木_

已于 2024-07-02 16:32:14 修改

阅读量147

点赞数 5

分类专栏：前端文章标签：前端 js css

于 2024-07-02 16:31:14 首次发布

本文链接：https://blog.csdn.net/qq_57724229/article/details/140130417

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

源码

<style>
    #box {
        background-color: yellow;
        border: 1px solid red;
        width: 300px;
        height: 300px;
        transition: 2s;
    }

    #box.active {
        width: 0;
        height: 0;
    }
</style>

<body>
    <button onclick="toggleWidthAndHeight()">编辑</button>
    <div id="box"></div>
    <script>
        const box = document.getElementById('box');

        let toggled = false;

        function toggleWidthAndHeight() {
            toggled = !toggled;
            box.setAttribute('class', toggled ? 'active' : '');
        }

    </script>
</body>