html5炫酷按鈕,純css3黑色炫酷開關(guān)按鈕動畫效果

1、html5炫酷按鈕,純css3黑色炫酷開關(guān)按鈕動畫效果這個css3開關(guān)按鈕效果模擬了現(xiàn)實生活中的開關(guān)按鈕。囫圇代碼用法純css3完成，并且?guī)в虚_關(guān)按下時的動畫效果。htmlhtml結(jié)構(gòu)十分容易，是用一個input來作為開關(guān)的主體?；綾ss樣式.button display: block;width: 400px;height: 120px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: t

2、ranslate(-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: 1c

3、1d1f;-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%

4、);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: opacit