鼠标经过后背景填充的小特效

介绍

做一个鼠标经过后背景填充的样式很有趣的特效

小特效的思路

• 前几天逛GitHub的时候 看到尤雨溪的播客 (opens new window)有一个很有趣的小特效 我也打算模仿来写一个

实现代码

• 其实这个是一个很简单的css样式 但是实现效果很麻烦 首先你需要把你的span标签(或者div)设置成绝对定位position: relative; 然后通过:after伪选择器选中 伪选择器设置为固定定位position: absolute并且写上其他样式和过度效果transition 这个时候你在通过选择器:hover 来设置鼠标移入的样式即可
• 快速浏览效果! (opens new window)

<span class="lineLike">123</span>
  
<style>
    .lineLike {
      position: relative;
      cursor: default;
    }
    .lineLike:after {
      content: '';
      position: absolute;
      z-index: -1;
      top: 60%;
      left: -0.35em;
      right: -0.35em;
      bottom: 0;
      transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
      background-color: #43bc85;
      border-radius: 20px;
    }
    .lineLike:hover:after {
      top: 0%;
    }
</style>    

其他用处

• 你还可以用这种方式 实现这样的效果 是不是很好用呢

参考文献

尤雨溪的播客 (opens new window)