按钮模版:Btn-8
按钮模版:btn-8
效果展示
实现思路
这个效果的实现主要是利用了 CSS 优先级的规则
当 top 和 bottom 同时存在时,top 的优先级高于 bottom
当 left 和 right 同时存在时,left 的优先级高于 right
鼠标没有悬浮时,width: 0; right 0;
,相当于一个没有宽度的容器定为在父盒子的右边
当鼠标悬浮时,width: 100%;
,容器和父盒子大小一样大了,正常情况下应该是从右向左填充,因为容器是在父盒子的右边
但 left: 0;
,left 的优先级大于 right,所以容器从左向右填充
实现代码
1 | <button class="btn-8">BTN-8</button> |
1 | .btn-8 { |
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 View Room
评论