CSS3 Switch

以你之姓@ 2022-05-16 14:30 168阅读 0赞

![在这里插入图片描述][20181031102645577.gif]

除了下面这种方案实现switch，还可以使用 before + after 配合上 opacity 透明度的 0 和 1，来实现按钮的切换。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8"/>
    <style>
    :root {
    	--switch-width: 3em;
    	--switch-height: calc(var(--switch-width) / 2);
    	--switch-anim-duration: 0.5s;
    	font-size: 100%;
    }
    .switch {
    	display: none;
    }
    .switch-label {
    	width: var(--switch-width);
    	height: var(--switch-height);
    	border: 1px solid #AAA;
    	border-radius: calc(var(--switch-width) / 4);
    	background-color: #EEE;
    	cursor: pointer;
    	display: inline-block;
    	transition: opacity var(--switch-anim-duration) ease;
    	position: relative;
    }
    .switch-label::before {
    	content: '';
    	display: inline-block;
    	width: 50%;
    	height: 100%;
      	background-color: white;
    	border-radius: 100%;
    	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    	transition: all var(--switch-anim-duration) ease;
    	position: absolute;
    }
    /*
    相临兄弟选择器(单选)	p+ul
    兄长选择器(多选)		p~ul
    子代选择器(多选)		p>ul
    后代选择器(多选)		p ul
    */
    .switch:checked~label:before {
    	transform: translateX(calc(var(--switch-width) / 2));
    }
    #switch:checked~label {
    	background-color: green;
    }
    </style>
    <script>
    function onStateChange() {
    	console.log(document.getElementById("switch").checked);
    }
    </script>
    </head>
    <body>
    	<input type="checkbox" id="switch" class="switch" />
    	<label for="switch" class="switch-label" onclick="onStateChange()"></label>
    </body>
    </html>

[20181031102645577.gif]: /images/20220503/370da56996434a2296cb47394e48866f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3盒子模型（CSS3）

CSS3盒子模型（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2023年10月03日 13:46/ 0 赞/ 24 阅读

相关纯CSS样式写switch开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

喜欢ヅ旅行/ 2022年06月07日 11:59/ 0 赞/ 264 阅读

相关 3.2 switch语句

![70][]![70 1][]![70 2][] 【解释】如果表达式等于常量表达式1，则先执行语句组1，再执行break，执行完break后就会跳出switch语句；如

谁借莪１个温暖的怀抱￠/ 2022年05月20日 03:52/ 0 赞/ 112 阅读

相关 CSS3 Switch

![在这里插入图片描述][20181031102645577.gif] 除了下面这种方案实现switch，还可以使用 before + after 配合上 opacity 透

以你之姓@/ 2022年05月16日 14:30/ 0 赞/ 169 阅读

相关 css3 switch开关的实现

<input type="checkbox" id="switch" /><label for="switch">Toggle</label> inp

逃离我推掉我的手/ 2022年05月14日 04:53/ 0 赞/ 227 阅读

相关 css3实现switch开关效果

[css3实现switch开关效果][css3_switch] 之前阿里电面的时候问的一个问题，今天抽时间做了个demo。 ![997342-2016083014134

悠悠/ 2022年01月30日 19:51/ 0 赞/ 411 阅读

相关如何用Css3实现Switch组件

基于表单的Checkbox 效果图 ![Image 1][] switch.gif 原理 Checkbox, 有两种状态, 没选中和选中, 当选中的时候(:c

ゞ浴缸里的玫瑰/ 2022年01月07日 03:29/ 0 赞/ 202 阅读

相关用CSS写一个开关Switch

效果如下： ![2019080320023518.png][] 代码如下： HTML: <input class='switch-component' type

偏执的太偏执、/ 2021年11月10日 23:01/ 0 赞/ 364 阅读

相关 CSS做个Switch开关

Switch开关：　　![1041634-20170228144156001-1353181817.png][] 　　![1041634-2017022814420239

妖狐艹你老母/ 2021年09月15日 15:10/ 0 赞/ 363 阅读

相关 css写一个原生switch开关按钮

> 你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：前端开发。我的微信是 maomin9761，有什么疑问可以加我哦，自己创建了一

向右看齐/ 2021年08月27日 12:52/ 0 赞/ 518 阅读