CSS自定义下划线动画效果

顺晟科技

2021-10-01 14:25:11

304

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1 {
            position: relative;
            /* 关键代码 实现折行效果 */
            display: inline;
            padding-bottom: 2px;
            background-repeat: no-repeat;
            background-size: 0 2px;
            /* 控制线的位置 */
            background-position: 50% ;
            /* 0%  从左向右变动 */
            /* 50%  从中间往两侧 */
            /*   从右向左变动 */
            /* 0% 50%  可制作横穿线*/
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            /* 自己可以配置更多创意 */
            background-image: linear-gradient(to right, #3344aa 0%, red 50%, #333 );
        }
        
        h1:hover {
            background-size:  2px;
        }
    </style>
</head>

<body>
    <h1>很好的文章：JavaScript可变范围提升很好的文章：JavaScript可变范围提升很好的文章：JavaScript可变范</h1>
</body>

</html>

上一篇：CSS定义了下划线、下划线和删除线的下一篇：CSS文本下划线文本装饰

网站建设

Css

CSS自定义下划线动画效果