CSS 鼠标移动到文字上时底部出现渐变划线

啥都不多头发多

于 2023-03-28 15:03:10 发布

阅读量248

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/leisir02/article/details/129816018

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指针移动文字底部颜色变化</title>
</head>
<style>
    .title{
        color: #333;
        line-height: 2;
    }
    .title span{
        background: linear-gradient(to right, #d9edf7,#2d6a88) no-repeat right bottom;
        background-size:0 2px;
        transition: background-size 1300ms;
    }
    .title span:hover{
        background-position-x:left;
        background-size: 100% 2px;
    }
</style>
<body>
        <h1 class="title">
            <span>CSS才是永远的神

                底部颜色的渐变
            </span>
        </h1>
</body>
</html>