html5+css3+php左右滑动效果,纯css3带动画效果的左右滑动按钮

这个开关效果是仿照android滑动开关的效果。是用纯css3制作，效果非常炫酷。

HTML

html结构非常简单，是用一个input来作为开关的主体。

基本CSS样式

.button {

display: block;

position: absolute;

width: 240px;

height: 80px;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);

background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);

border-radius: 40px;

box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);

cursor: pointer;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.button span {

position: absolute;

display: block;

}

动画部分css请参考下载文件中的代码。