简要教程
这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果，均由按钮的伪元素和CSS3 animation来制作完成。
查看演示
下载插件
使用方法
立即学习
“
前端免费学习笔记（深入）
”；
HTML结构
该效果通过超链接来制作按钮，例如第一种Swipe效果的HTML代码为：
CSS3选项动画切换效果
CSS3实现的选项动画切换效果。点击旁边的不同花色选项，可以切换牌面的花色显示。适用浏览器：IE9+、FireFox、Chrome、Safari、Opera。
下载
CSS样式
为了方便，特效中为除了、、、和之外的所有元素都添加了动画过渡效果。
然后为按钮设置通用样式。
在第一个DEMO中，通过按钮的:before伪元素来制作深紫色的滑块。滑块采用绝对定位，位于按钮的左侧位置，开始时它的宽度为0.
在鼠标滑过按钮时，按钮的字体颜色过渡为白色，:before伪元素的宽度有0变化为100%。
在用户点击按钮时，再为按钮的背景色变换一种较浅的紫色。
Swipehtml *,
html *:before,
html *:after {
box-sizing: border-box;
-webkit-transition: 0.5s;
transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
-webkit-transition: none;
transition: none;
}a {
text-decoration: none;
line-height: 80px;
color: black;
}
[class^="btn-"] {
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 80px;
max-width: 250px;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}.btn-0 {
color: #9a3789;
}
.btn-0:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80px;
background: #520c46;
}.btn-0:hover {
color: #e1c4dc;
}
.btn-0:hover:before {
width: 250px;
}.btn-0:active {
background: #881474;
}