渐变下划线文字

一个普通编程爱好者

已于 2025-03-28 08:44:38 修改

阅读量366

点赞数 4

分类专栏：创意css效果文章标签：创意css

于 2025-02-06 21:04:02 首次发布

本文链接：https://blog.youkuaiyun.com/2302_80513405/article/details/145481929

版权

创意css效果专栏收录该内容

5 篇文章

订阅专栏

渐变下划线文字

**推荐一个在线运行代码工具，可直接复制过去查看效果：**HTML5在线运行,代码测试 - 在线编辑器(cainiaojc.com)

代码解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 span{
            color: #333;
            line-height: 2;
            background: linear-gradient(to right, #ec695c, #61c454) no-repeat bottom right;
            background-size: 0 2px;
            transition: background-size 1300ms;
        }
        h1 span:hover{
            background-position: bottom left;
            background-size: 100% 2px;
        }
    </style>
</head>
<body>
    <h1><span>十年后，你会发现css是你永远学不会的语言</span></h1>
</body>
</html>

CSS属性说明

background: linear-gradient(to right, #ec695c, #61c454) no-repeat bottom right
- 创建一个从左到右的渐变背景，颜色从红色(#ec695c)过渡到绿色(#61c454)
- no-repeat 确保背景不重复
- bottom right 设置背景位置在右下角
background-size: 0 2px
- 初始状态下背景宽度为0，高度为2px
- 这就是我们的下划线的尺寸设置
transition: background-size 1300ms
- 对background-size属性添加1.3秒的过渡动画
- 使下划线的展开有平滑的动画效果
:hover 状态
- background-position: bottom left 将背景位置改为左下角
- background-size: 100% 2px 将背景宽度展开到100%