详解纯CSS实现的简易开关切换动画

最新推荐文章于 2024-09-05 22:03:42 发布

代码解释员

最新推荐文章于 2024-09-05 22:03:42 发布

阅读量482

点赞数

分类专栏：简易组件工具实现文章标签： CSS 开关效果过渡动画前端开发用户体验

本文链接：https://blog.csdn.net/weixin_44343416/article/details/120338954

版权

效果展示：

open:

close:

代码实现：

 <input type="checkbox" name="switch" id="switch">

 <label for="switch"></label>

         /* 精确找到input类型 */

        input[type="checkbox"] {

            width: 0;

            height: 0;

            visibility: hidden;

        }

        label {

            display: block;

            width: 500px;

            height: 150px;

            background-color: #477a85;