当前第2页 返回上一页
示例二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <button class="btn-2">按钮二</button>
<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
width: 0;
background: #f13f84;
transition: all .3s;
z-index: -1;
}
.btn-2:hover:after{
width: 100%;
}
</style>
|
解析：
1、这里和示例一其实类似，不过这里是改变伪类的宽度。
2、以此类推，我们可以改变伪类的高度，就可以看到向下扩展的动画了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <button class="btn-3">按钮三</button>
<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
width: 0;
background: #f13f84;
transition: all .3s;
z-index: -1;
}
.btn-2:hover:after{
width: 100%;
}
</style>
|
更多编程相关知识，请访问：编程入门！！
以上就是利用css伪类实现鼠标滑过按钮动画效果的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
利用css伪类实现鼠标滑过按钮动画效果
css伪类怎么用
更多相关阅读请进入《css伪类》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 利用css伪类实现鼠标滑过按钮动画效果
