CSS3介绍
CSS3是CSS(层叠样式表)技术的升级版本,也新增了许多特性 —— 边框特性、多背景图、多列布局与弹性盒模型布局、过渡与动画等。但有兼容问题。。。
样品展示
代码部分
(我把CSS又写在一起了 [dog])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的开关</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
/* 文字部分 */
.channel {
position: fixed;
top: 20%;
left: 48%;
font-size: 30px;
color: #000000;
z-index: 10px;
}
/* 选择器用于选择以指定值开头的属性值的元素 */
input[type="checkbox"] {
position: absolute;
left: 45%;
top: 50%;
transform: translate(-50%, -50%);
appearance: none;
}
/* 改变了哦 */
/* 背景哦 */
input[type="checkbox"]::before {
content: "";
width: 150px;
height: 80px;
position: absolute;
background-color: #05c46b;
border-radius: 40px;
box-shadow: 0 0 3px black;
}
/* 前面的小球 */
input[type="checkbox"]::after {
content: "";
width: 76px;
height: 76px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 2px;
left: 2px;
box-shadow: 0 0 3px gray;
transform: 0.2s linear;
}
/* 点击后变颜色 与 移动位置 */
input:checked[type="checkbox"]::after {
background-color: gray;
left: 72px;
}
</style>
<body>
<!-- 文字 -->
<div class="channel">开关</div>
<input type="checkbox" name="" id="" value="" />
</body>
</html>
如果还是 不可以到 B站 看一下,里面好多教程。 —— 不是打广告吧?
[modesty]