纯CSS样式 写switch开关

最新推荐文章于 2024-04-16 10:07:01 发布
最新推荐文章于 2024-04-16 10:07:01 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： switch开关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifuzeng/article/details/78296033
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        .mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none; }

.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

.mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63; }

.mui-switch:checked:before {
left: 21px; }

.mui-switch.mui-switch-animbg {
transition: background-color ease 0.4s; }

.mui-switch.mui-switch-animbg:before {
transition: left 0.3s; }

.mui-switch.mui-switch-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #64bd63;
transition: border-color 0.4s, background-color ease 0.4s; }

.mui-switch.mui-switch-animbg:checked:before {
transition: left 0.3s; }

.mui-switch.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }

.mui-switch.mui-switch-anim:before {
transition: left 0.3s; }

.mui-switch.mui-switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }

.mui-switch.mui-switch-anim:checked:before {
transition: left 0.3s; }


/*# sourceMappingURL=mui-switch.css.map */
@mixin borderRadius($radius:20px) {
border-radius: $radius;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}


$duration: .4s;
$checkedColor: #64bd63;
.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
@include borderRadius();
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
&:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
@include borderRadius();
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

&:checked {
border-color: $checkedColor;
box-shadow: $checkedColor 0 0 0 16px inset;
background-color: $checkedColor;
&:before {
left: 21px;
}
}

&.mui-switch-animbg {
transition: background-color ease $duration;
&:before {
transition: left 0.3s;
}
&:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: $checkedColor;
transition: border-color $duration, background-color ease $duration;
&:before {
transition: left 0.3s;
}
}

}
&.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;
&:before {
transition: left 0.3s;
}
&:checked {
box-shadow: $checkedColor 0 0 0 16px inset;
background-color: $checkedColor;
transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;
&:before {
transition: left 0.3s;
}
}

}
}
    </style>
</head>
<body>
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
<br>
<br>
<br>
<br>
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked></label>
<br>
<br>
<br>
<br>
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim
类即可</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
</body>
</html>

 

 

 

 

 

 

效果图：

feifuzeng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS写一个开关Switch
fortune丶的blog
08-03 323
效果如下： 代码如下： HTML: <input class='switch-component' type='checkbox'> CSS(进行了浏览器的前缀兼容): .switch-component { position: relative; width: 60px; height: 30px; background-color: #da...
css实现switch开关
qq_44929535的博客
01-05 985
我们有很多放式实现switch开关的效果，平时大多数情况都是用第三方组件来实现的，虽然现在组件的定制性越来越高，但是想要一些特殊的效果还是得依靠原生来实现。那么接下来我们实现一个简单的switch开关效果吧。 效果： 代码： 实现思路：设置一个type="checkbox"的input框让其不展示，但是点击时选中状态会变，然后根据选中状态来控制下面真正展示的label 标签的展示样式即可 <!DOCTYPE html> <html lang="en"> <head>
switch开关：input checkbox模拟switch开关
最新发布
weixin_52618969的博客
04-16 260
switch开关：input checkbox模拟switch开关
css自定义switch
here962464的博客
05-30 285
【代码】css自定义switch。
CSS 实现 Switch 开关
一尾流莺 半世情缘
06-30 273
效果图 根据需求可知，Switch开关只有两种选择，true或false。 所以我们想到HTML的checkbox控件来实现。 源码 HTML <input id="switch" type="checkbox" class="switch"> CSS /* Switch开关样式 */ /* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */ input[type='checkbox'].switch{ outline: none
纯CSS3代码实现switch滑动开关按钮效果
09-27
在本文中，我们将深入探讨如何使用纯CSS3来实现一个功能完善的switch滑动开关按钮效果。这个效果通常用于在用户界面中提供一种二选一的交互方式，如开启或关闭某个功能。下面我们将解析HTML结构、CSS样式以及动画...
vue自定义switch开关组件,实现样式可自行更改
10-16
在本文中，我们将深入探讨如何在Vue.js中创建一个自定义的Switch开关组件，使其样式可以根据需求进行个性化定制。Vue自定义Switch组件允许开发者灵活地调整开关的外观和行为，以满足不同项目的需求。 首先，我们来...
纯js写的一个switch开关（或叫checkbox开关）
06-05
综上所述，这个纯JS实现的switch开关结合了HTML、CSS3和JavaScript的精华，通过HTML构建基础结构，CSS3提供美观的样式和动画，JavaScript则负责处理用户交互和状态变更。这样的开关不仅具有良好的用户体验，而且完全...
CSS开关按钮样式详解
12-10
`<div class="switch">`用于包裹这两者，方便后续的CSS样式应用。 接下来是CSS部分，我们的目标是隐藏实际的checkbox，只通过label来控制开关的状态。这可以通过以下样式实现： ```css .cmn-toggle { position: ...
html+css开关样式
11-07
在`switch.css`文件中，我们可以定义开关的各种样式。首先，我们需要设置基本的布局和尺寸： ```css .switch { display: inline-block; position: relative; width: 60px; height: 34px; } .switch input { ...
纯css写一个switch开关
weixin_33701617的博客
07-26 269
这样的简单的开关效果 1、html <div class="switch-box"> <div class="bg_con"> <input id="checked_1" type="checkbox" class="switch" value="0" /> <label for="checked...
自定义switch按钮样式，css实现
dexia7362的博客
01-24 607
css .toggle-switch { display: inline-block; position: relative; width: 48px; height: 24px; border-radius: 5px; } .toggle-switch input[type="checkbox"] { position: absolu...
css3实现switch开关效果
wwf1225的博客
05-20 1337
css3实现switch开关效果 之前阿里电面的时候问的一个问题，今天抽时间做了个demo。 html结构 <div class="container"> <div class="bg_con"> <input id="checked_1" type="checkbox" class="switch" /...
纯css手写switch
Dormiveglia-flx的博客
10-14 815
2.定义switch的开关按钮：使用伪元素，给switch添加按钮。1.定义switch的背景：让span标签，填充满父元素，用作switch的背景。标签，就可以在隐藏input的时候，点击label触发选中事件，我们经常用这种方式来定义一些样式。前置知识二：正常来说，我们dispaly:none的时候，我们就不会触发隐藏元素的点击事件了。当input选中的时候，已经添加的伪类，颜色变白，且移动44px */概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
纯css实现 switch开关
weixin_30765505的博客
10-15 125
<!-- 直接看代码，利用了css3兄弟选择器 --><!-- html --><button class="switch"> <input type="checkbox"> <span><i></i></span> </button> ...
纯css 实现switch开关
tutouXiaoGe的博客
03-15 453
复选框用户点击选中的时候可以通过伪类选择器（:checked）来选中更改元素样式，可以通过这个更改其兄弟元素来实现switch。
CSS格式化、兼容及常用样式(switch开关记得收藏)
cai niaoyihao_的博客
04-14 1482
不经历项目的苦，哪能体会一像素一边框一阴影带来的痛（为了减少痛苦，建议收藏备用）。
前端必学的CSS制作Switch动画开关按钮演示
风中追风
02-16 5460
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮选择处，给页面增加一点活泼的气息~
css开关按钮样式
05-31
可以使用以下 CSS 样式实现开关按钮： HTML 代码： ```html <label class="switch"> <span class="slider"></span> ``` CSS 样式： ```css .switch { position: relative; display: inline-block; width:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值