css 下划线滑过动画效果

healer-

已于 2024-01-09 17:16:50 修改

阅读量424

点赞数 7

文章标签： css 前端

于 2024-01-09 17:15:06 首次发布

本文链接：https://blog.csdn.net/canyi8023/article/details/135485381

版权

最近学习了一个有意思的效果，记录一下，下面看看效果：

鼠标滑入，背景颜色逐渐展示，移除鼠标背景颜色逐渐消失，该效果主要通过背景颜色实现，下面看看实现代码：

html代码：

<div class="title-span">
   <span>css的奇妙之处</span>
</div>

css 代码：

.title-span{
  color: #333333;
  line-height: 2;
  margin-left: 20px;
  font-size: 30px;
  span{
    background: linear-gradient( to right, #ec695c, #61c454) no-repeat right bottom;
    background-size:  0 2px;
    transition: background-size 800ms;
  }
}
.title-span span:hover{
  background-position-x: left;
  background-size:  100% 2px;
}

地址：CSS是你永远学不会的语言【渡一教育】_哔哩哔哩_bilibili