CSS滑动背景是如何实现的？

原创 2023-04-30 21:15:09 501

GIF 2023-4-30 21-25-13.gif

最近在网上看到一个很有意思是的css特效，鼠标经过文字的时候会出现由左到右动画下划线，当鼠标一走的时候下划线会从左往右逐渐消失。

<style>
    h2.title span{
        background: linear-gradient(to right,red,yellow,blue) no-repeat right bottom;
        background-size: 0 2px;
        transition: background-size 1300ms;
    }
    h2.title span:hover{
        background-position-x: left;
        background-size: 100% 2px;
    }
</style>

这里在css方面着重使用过度时间和图像定位（transition，background-position-x）来完成视觉动画效果，其实就是背景的变化。

<h2 class="title">
    <span>最近在网上看到一个很有意思是的css特效，鼠标经过文字的时候会出现由左到右动画下划线，当鼠标一走的时候下划线会从左往右逐渐消失。</span>
</h2>

从这里也给了我很多启发，其实css效果我们可以尝试创新使用

CSS滑动背景是如何实现的？

推荐

推荐资讯

热门资讯