标签搜索
隐藏侧边栏

仅用css实现按钮切换效果

搞前端的半夏
2022-05-17 / 0 评论 / 0 点赞 / 78 阅读 / 1,652 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

对于前端开发人员,checkbox应该是经常见到的东西。利用checkbox的checked属性,我们可以做出很多精彩的效果,之前还用checkbox来做动画暂停。前几天还看到外国大佬使用 checkbok做游戏:https://www.bryanbraun.com/2021/09/21/i-keep-making-things-out-of-checkboxes/ ,真的是佩服的五体投地,不过对于我这种菜鸡选手,还是只能实现一些简单的东西。对于下面的这个switch按钮,大家应该非常熟悉了,同样的在这个效果上还衍生出了各种华丽花哨的效果,例如暗黑模式的切换。一生万,掌握了一,万!还不是手到擒来。

image-20211128233027149

标签

这里使用for将label和input捆绑

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

同时设置input不可见

input {
	display: none;
}

美化label

遇到checkbox的美化问题,基本上都是考虑用美化labl替代美化input。

设置背景颜色,宽高,以及圆角

.switch {
    display: inline-block;
    display:relative;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
}

最终的效果如下:

image-20211128233616100

切换的圆

在label上会有一个圆,一开始是在左边的,效果如下,其实这个只需要利用伪元素+positon定位,就可以实现了。

image-20211128233732168

这是postion:absolute,同时将位置定位在top1px,left1px。同时设置圆角。

      .switch:after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 18px;
        background-color: white;
        top: 1px;
        left: 1px;
        transition: all 0.3s;
      }

checked+小球右移动

这里点击之后圆会跑到右边,这里有两种实现方案

1.仍然通过定位

当checkbox处于checked状态,会设置top,left,bottom,right。这里将top,left设置为auto是必须的,这种的好处就是,不需要考虑label的宽度。

  input[type="checkbox"]:checked + .switch:after {
        top: auto;
        left: auto;
        bottom: 1px ;
        right: 1px ;
      }

当然知道label的宽度可以直接,设置top和left

top: 1px;
left: 21px;

2.translateX

*transform: translateX(20px)*

美化切换后的label

加上背景色

input[type="checkbox"]:checked + .switch {
background-color: #7983ff;
}

效果:

switch

后记

看上去本文是一篇介绍一个checkbox美化的效果,其实是一篇告诉你如何美化checkbox的文章,最终的思想就是依赖for的捆绑效果,美化label来达到最终的效果。

同时推荐大家看看copen上的这个仓库:

https://codepen.io/oliviale/pen/xxboXzo

image-20211128235343983

我只能说牛B!!!!!

0

评论区