欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

Css3制作动态开关的效果代码

 

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

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;

}

</style>

</head>

<body>

<input type="checkbox" id="swtich">

<label class="button" for="swtich"></label>

</body>

</html><!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

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;

}

</style>

</head>

<body>

<input type="checkbox" id="swtich">

<label class="button" for="swtich"></label>

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c37313.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-08-12 01:31 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。