Css3如何制作动态开关的效果
小编给大家分享一下Css3如何制作动态开关的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
body{
background: black;
}
* {
margin: 0;
padding: 0;
}
body {
padding: 26%;
}
.button {
display: inline-block;
position: relative;
height: 40px;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
background-color: #eee;
border-radius: 30px;
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.button:before {
content: "";
display: inline-block;
width: 80px;
height: 42px;
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
border: 2px solid #eee;
transition: all 0.2s linear;
}
.button:after {
position: absolute;
left: 2px;
top: 2px;
content: "";
display: inline-block;
width: 38px;
height: 38px;
background-color: #fff;
border-radius: 40px;
transition: all 0.2s linear;
box-shadow: 0px 1px 3px #bbb;
}
input:checked ~ .button:before {
background-color: red;
border: 1px solid red;
}
input:checked ~ .button:after {
left: 40px;
}
body{
background: black;
}
* {
margin: 0;
padding: 0;
}
body {
padding: 26%;
}
.button {
display: inline-block;
position: relative;
height: 40px;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
background-color: #eee;
border-radius: 30px;
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.button:before {
content: "";
display: inline-block;
width: 80px;
height: 42px;
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
border: 2px solid #eee;
transition: all 0.2s linear;
}
.button:after {
position: absolute;
left: 2px;
top: 2px;
content: "";
display: inline-block;
width: 38px;
height: 38px;
background-color: #fff;
border-radius: 40px;
transition: all 0.2s linear;
box-shadow: 0px 1px 3px #bbb;
}
input:checked ~ .button:before {
background-color: red;
border: 1px solid red;
}
input:checked ~ .button:after {
left: 40px;
}
以上是"Css3如何制作动态开关的效果"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!