简要教程
这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果,均由按钮的伪元素和CSS3 animation来制作完成。
查看演示 下载插件
使用方法
HTML结构
该效果通过超链接来制作按钮,例如第一种Swipe效果的HTML代码为:
<a class="btn-0" href="#">Swipe</a>
CSS样式
为了方便,特效中为除了、、、和之外的所有元素都添加了动画过渡效果。
html *, 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; }
在第一个DEMO中,通过按钮的:before伪元素来制作深紫色的滑块。滑块采用绝对定位,位于按钮的左侧位置,开始时它的宽度为0.
.btn-0 { color: #9a3789; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #520c46; }
在鼠标滑过按钮时,按钮的字体颜色过渡为白色,:before伪元素的宽度有0变化为100%。
.btn-0:hover { color: #e1c4dc; } .btn-0:hover:before { width: 250px; }
在用户点击按钮时,再为按钮的背景色变换一种较浅的紫色。
.btn-0:active { background: #881474; }
Atas ialah kandungan terperinci 基于CSS3 animation的鼠标滑过按钮特效的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!