【CSS】实现按钮hover时背景色从左慢慢移动到右边 |
您所在的位置：网站首页 › ios过渡动画从右侧出来怎么从 › 【CSS】实现按钮hover时背景色从左慢慢移动到右边 |
【CSS】实现按钮hover时背景色从左慢慢移动到右边
|
按钮鼠标移动上去时，新背景色从左到右滑过去 思路： 1.正常情况下： 按钮通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大，且在按钮的下面，刚开始宽度为0 2.鼠标移动过去: button的真正的背景色设置为透明，z-index:1 然后给最下面一层的颜色是以前的背景色，z-index:-2，width:100% 按钮下面一层，z-index:-1,背景色为新背景色，width:100%,再设置个过渡动画 通过这个技巧可以实现这个效果： .btn{ position: relative; width: auto; min-width: 120px; padding: 10px; text-align: center; color: #fff; background: #00d463; cursor: pointer; border-radius: 4px; border: none; } .btn:after,.btn:before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #00d463; z-index:-2; border-radius: 4px; } .btn:hover{ z-index:1; background:transparent; } .btn:before { transition: .3s; background: #14ae5c; z-index:-1; } .btn:hover:after,.btn:hover:before { width: 100%; } Try Free在线预览和编辑测试： Plunker - 按钮hover时背景色从左慢慢移动到右边
|
【本文地址】
今日新闻 |
推荐新闻 |