html5炫酷按钮,纯css3黑色炫酷开关按钮动画效果

这个css3开关按钮效果模拟了现实生活中的开关按钮。整个代码使用纯css3完成，并且带有开关按下时的动画效果。

HTML

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

基本CSS样式

.button {

display: block;

width: 400px;

height: 120px;

position: absolute;

top: 50%;

left: 50%;

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

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

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

background-color: #000000;

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

border-radius: 20px;

overflow: hidden;

cursor: pointer;

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

}

.button span {

display: block;

position: absolute;

top: 6px;

width: 194px;

height: 108px;

background-color: #1c1d1f;

-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;

transition: transform 300ms ease, box-shadow 300ms ease;

}

.button span:before {

position: absolute;

top: 50%;

left: 50%;

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

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

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

font-family: "Open Sans";

font-weight: 800;

font-size: 48px;

-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

}

.button span:after {

content: "";

width: 4px;

height: 108px;

position: absolute;

top: 0;

background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

-webkit-transition: opacity 300ms ease;

transition: opacity 300ms ease;

}

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