网页按钮滑动变色与按钮光影效果的实现

基于chrome，不支持IE与Edge

网页按钮滑动变色与按钮光影效果的实现)

前言：涉及知识点

1.重塑复选框外观

2.伪元素after

3.是否勾选按钮

原理：

将复选框是否勾选理解为两个元素即可

知识点解释

1.重塑复选框外观

为了让它看上去更像回事，重塑外观

注：基于chrome，不支持IE与Edge

取消复选框默认外观

-webkit-appearance: none;

设置外边框

border: 10px solid #c1c1c1;
/*只是为了好看*/

设置圆角

border-radius: 50px;
/*也只是为了好看*/

设置长，宽，背景颜色

width: 150px;height: 70px;
background-color: #888;
position: relative;
/*如果要更改长度记得连着下面的被勾选伪元素（伪元素被选择时到达的位置）一起改*/
/*如果要更改宽度记得连下面的伪元素一起改*/

设置过渡

transition: 0.6s;

理解：在0.6s后元素完成转换

设置被勾选后的样子

input[type='checkbox']:checked{
	background: #232323;
}

主体样式会继承原元素样式

~~有点类似于子类与父类的关系~~

元素css样式部分完整代码

input[type='checkbox']{
    -webkit-appearance: none;
    margin: 50px;
    border: 10px solid #c1c1c1;
    border-radius: 50px;
    width: 750px;height: 70px;
    background-color: #888;
    position: relative;
    transition: 0.6s;
}
input[type='checkbox']:checked{
	background: #232323;
}

2.伪元素after

复选框<input type="checkbox"/>是一个单标签结构，无法在其内包裹元素。

所以用复选框改出来的按钮没有负责滑动的部分

为了解决这一问题，使用伪元素after作为负责滑动的部分

生成伪元素

input[type='checkbox']::after{
			content: "";/*content表明这个东西存在*/
}

设置宽，高，位置

width: 60px;height: 60px;
position: absolute;
left: -5px;top: -5px;

设置圆角

border-radius: 30px;

设置伪元素颜色

background-color: #000000;

或者渐变色

background: linear-gradient(to bottom , #d3d3d3 , #000000);

ps:没有background-color: linear-gradient(to bottom , #d3d3d3 , #000000);这种写法

ps:如果不设置按钮颜色，颜色透明（同时下面的阴影就没用了）

设置伪元素阴影

box-shadow:0px 2px 2px #eee inset,2px 1px 2px 0px #333;

理解：此处使用box-shadow给伪元素添加了两个阴影（以达到正常光影的立体感）

设置伪元素过渡

transition: 0.6s;

理解：在0.6s后元素完成转换

设置伪元素在复选框被勾选后的样式

input[type='checkbox']:checked::after{
	left: 75px;
}

伪元素css样式完整代码

input[type='checkbox']::after{
    content: "";
    width: 60px;height: 60px;
    position: absolute;
    left: -5px;top: -5px;
    border-radius: 30px;
    /*background-color: #000000; *//*设置按钮颜色*/
    /* background: linear-gradient(to bottom , #d3d3d3 , #000000);*/ /*设置按钮阴影渐变效果*/ 
    box-shadow: 0px 2px 2px #eee inset,2px 1px 2px 0px #333;
    transition: 0.6s;
}
input[type='checkbox']:checked::after{
    left: 75px;
}

附录：源代码（含部分注释）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;margin: 0;/*取消所有元素默认外边距与内边距*/
		}
		input[type='checkbox']{
			-webkit-appearance: none;/*取消默认样式*/
			margin: 50px;/*设置外边距，便于观察*/
			border: 10px solid #c1c1c1;/*外边框属性*/
			border-radius: 50px;/*圆角*/
			width: 150px;height: 70px;/*长宽*/
			background-color: #888;/*框内背景色*/
			position: relative;/*位置判定方式：生成相对定位的元素，相对于其正常位置进行定位。*/
			transition: 0.6s;/*过渡速度*/
		}
		input[type='checkbox']:checked{
			background: #232323;/*设置被勾选时框内颜色*/
		}
		input[type='checkbox']::after{
			content: "";/*一份声明，告诉浏览器这里有一个伪元素*/
			width: 60px;height: 60px;/*长宽*/
			position: absolute;/*位置判定方式：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/
			left: -5px;top: -5px;/*位置偏移*/
			border-radius: 30px;/*圆角*/
			/* background-color: #000000; */
			background: linear-gradient(to bottom , #d3d3d3 , #000000);/*按钮渐变色*/
			box-shadow: 0px 2px 2px #eee inset,2px 1px 2px 0px #333;/*两种阴影，实现光影效果*/
			transition: 0.6s;/*过渡速度*/
		}
		input[type='checkbox']:checked::after{
			left: 75px;/*设置被勾选时伪元素（按钮）最终位置*/
		}
	</style>
	<body>
		<input type="checkbox"/>
	</body>
</html>

转载请注明出处：http://adysloud.gitee.io/adysloud.github.io/2022/03/18/%E7%BD%91%E9%A1%B5%E6%8C%89%E9%92%AE%E6%BB%91%E5%8A%A8%E5%8F%98%E8%89%B2%E4%B8%8E%E6%8C%89%E9%92%AE%E5%85%89%E5%BD%B1%E6%95%88%E6%9E%9C%E7%9A%84%E5%AE%9E%E7%8E%B0/

原文链接：https://blog.csdn.net/m0_61428698/article/details/123718503