搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

纯CSS3代码如何实现switch滑动开关按钮效果

发布时间：2023-06-02 14:48:19 来源：互联网
.
看淡拥有，不刻意追求某些东西，落叶归根，那些属于你的，总会回来。劳动的意义不仅在于追求业绩，更在于完善人的心灵。

html结构

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="bg_con">
  3. <inputid="checked_1"type="checkbox"class="switch"/>
  4. <labelfor="checked_1"></label>
  5. </div>
  6. </div>

css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

CSS Code复制内容到剪贴板
  1. .switch{
  2. display:none;
  3. }
  4. label{
  5. position:relative;
  6. display:block;
  7. padding:1px;
  8. border-radius:24px;
  9. height:22px;
  10. margin-bottom:15px;
  11. background-color:#eee;
  12. cursor:pointer;
  13. vertical-align:top;
  14. -webkit-user-select:none;
  15. }
  16. label:before{
  17. content:'';
  18. display:block;
  19. border-radius:24px;
  20. height:22px;
  21. background-color:white;
  22. -webkit-transform:scale(1,1);
  23. -webkit-transition:all0.3sease;
  24. }
  25. label:after{
  26. content:'';
  27. position:absolute;
  28. top:50%;
  29. left:50%;
  30. margin-top:-11px;
  31. margin-left:-11px;
  32. width:22px;
  33. height:22px;
  34. border-radius:22px;
  35. background-color:white;
  36. box-shadow:1px1px1px1pxrgba(0,0,0,0.08);
  37. -webkit-transform:translateX(-9px);
  38. -webkit-transition:all0.3sease;
  39. }
  40. .switch:checked~label:after{
  41. -webkit-transform:translateX(9px);
  42. }
  43. .switch:checked~label:before{
  44. background-color:green;
  45. }

以上所述是小编给大家介绍的纯CSS3代码实现switch滑动开关按钮效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

到此这篇关于纯CSS3代码如何实现switch滑动开关按钮效果就介绍到这了。爱给予的只是它自己，取走的也只从它自己，爱不占有，也不能被占有。爱就在爱中满足。更多相关纯CSS3代码如何实现switch滑动开关按钮效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： switch
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图