css3自定义变量，实现switch开关

2022-07-12 网页编程网 网页编程网

<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0}
:root{
--blue-color:skyblue;
--blue-border:red;
--yellow-background:green;
--yellow-background:yellow;
--white:white;
--gray-border:gray;
}
/*外层轮廓*/
.toggle-label{
width:200px;
height:100px;
background-color:var(--blue-color);
border:5px solid var(--blue-border);
position:relative;/*子绝父相*/
display:block;/*转成块，使其能设置高高*/
border-radius:100px;
margin:200px auto;
}
.toggle-ball{
position:absolute;/*脱离流，使其能设置高高*/
left:8px;
top:8px;
width:82px;
height:82px;
background-color:var(--yellow-background);
border:5px solid var(--yellow-border);
border-radius:82px;
}
/*伪元素制作二横线*/
.toggle-label::before{
content:'';
position:absolute;
left:130px;
top:35px;
width:40px;
height:5px;
background-color:var(--white);
border-radius:5px;
}
.toggle-label::after{
content:'';
position:absolute;
left:115px;
top:60px;
width:40px;
height:5px;
background-color:var(--white);
border-radius:5px;
}
/*小球上的反光点*/
.toggle-ball::before{
content:'';
position:absolute;
left:20px;
top:15px;
width:15px;
height:15px;
border-radius:50%;
background-color:var(--gray-border);
opacity:0;/*隐藏*/
}
.toggle-ball::after{
content:'';
position:absolute;
left:10px;
top:35px;
width:15px;
height:15px;
border-radius:50%;
background-color:var(--gray-border);
opacity:0;
}

#toggle:checked+.toggle-label>.toggle-ball{
	left:104px;
	background:var(--white);
	border-color:var(--gray-border);
}
#toggle:checked+.toggle-label{
background-color:var(--indigo-color);
border-color:var(--indigo-border);
}
#toggle:checked+.toggle-label::before{
	left:40px;
	top:32px;
	width:6px;
	height:6px;

}
#toggle:checked+.toggle-label::after{
	left:60px;
	top:32px;
	width:8px;
	height:8px;
}
.background{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:white;
	z-index:-1;
	transition:250ms ;/*过滤*/
}
#toggle:checked~.background{
	background-color:var(--gray-border);
}
</style>
</head>
<body>
<input type="checkbox" name="" id='toggle'>
<label for='toggle' class="toggle-label">
	<span class="toggle-ball"></span>
</label>
<div class="background"></div>

<div>
1.css3变量定义var,可以统一修改某个属性。<br />
2.伪元素选择器。如很多菜单前的图标（如，前缀），可以用此加，可避免加个标签，html标签少些。<br />
3.是行内元素，不能设置宽高，要变成块，如加上display:inline-block，也可用style中的二种方法<br />
4.+选择后面相邻兄弟元素，~后面所有兄弟元素，
</div>
<style>
:root{
--primary-color:skyblue;
}
.t{
	width:100px;
	height:100px;
	background-color:var(--primary-color);
	position:absolute;
	animation-name:move;
	animation-duration:2s;
}
.t2{
	width:50px;
	height:50px;
	background-color:var(--primary-color);
}

p::first-line{
color:red;
}
p::first-lettore{
	font-size:18px;
}
p::after{/*是行内元素，不能设置宽高，要变成块，如加上display:inline-block*/
	content:'%';
	color:pink;
}
@keyframes move{
	0%{
		left:0;
		top:0;
	}
	25%{
		left:600px;
		top:0;
	}
	100%{
		left:0;
		top:600px;
	}
}
</style>

完整版。

阅读原文

阅读 2185

123 显示电脑版