php实现动态按钮效果,Css3制作动态开关的效果的实现步骤

CSS3制作动态左右开关，动态开关按钮是一款非常酷的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;

}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：