在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。
例如像下面这种按钮的动画效果该怎么实现呢？
简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题，起始位置在按钮的最左边
废话就不多说，咱们直接上代码，干就完了！！！
- html代码
<body>
<div class="abc">
<div>
<button class="btn btn-1 btn-1c">hello world</button>
</div>
</div>
</body>- css样式代码
.btn-1c {
text-transform: uppercase;
}
.btn-1c::after {
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #fff;
}
.btn-1c:hover::after {
width: 100%;
}其他样式(class="btn btn-1")就不再赘述了，参考
是不是非常的简单，毫无技术难度，非常人性化，哈哈😁，赶紧自己动手试一试吧 ！！！
扫一扫
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
