html5图片自动滑动效果,15种漂亮的纯CSS3滑动按钮特效

这是一组共15种不同效果的纯CSS3滑动按钮。这些滑动按钮通过使用“CHECKBOX HACK”技术，通过checkbox和label元素来完成这些滑动按钮的动画效果。

制作方法

HTML结构

所有的滑动按钮都采用相同的HTML结构，在一个

元素中包裹元素和一个空的元素。

CSS样式

首先对checkbox及其伪元素，label和input元素进行重置，并设置它们的基本的样式。

.checkbox {

position: relative;

display: inline-block;

}

.checkbox:after, .checkbox:before {

font-family: FontAwesome;

-webkit-font-feature-settings: normal;

-moz-font-feature-settings: normal;

font-feature-settings: normal;

-webkit-font-kerning: auto;

-moz-font-kerning: auto;

font-kerning: auto;

-webkit-font-language-override: normal;

-moz-font-language-override: normal;

font-language-override: normal;

font-stretch: normal;

font-style: normal;

font-synthesis: weight style;

fon