一个个性的下划线

最新推荐文章于 2024-02-27 10:29:26 发布

weixin_30435261

最新推荐文章于 2024-02-27 10:29:26 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/tieway59/p/10706792.html

版权

示意图

原理

设置渐变背景，通过放大size来实现变形。（注意比例）

代码

<style>
        p{
            line-height: 100vh;
            font-size: 24px;
            font-family: "微软雅黑", "黑体", "等线";
            text-align: center;
        }
        a{
            transition: 0.5s;
            color: rgba(0,0,0,1.0);
            text-decoration: none;
            background: linear-gradient(rgba(255,255,255,1.0) 0%,
                                        rgba(255,255,255,1.0) 2%,
                                        rgba(100,200,255,1.0) 2%,
                                        rgba(100,200,255,1.0) 100%);
            background-size: 100% 4500%;
        }
        a:hover{
            color: rgba(255,255,255,1.00);
            transition: 0.5s;
            background-size: 100% 100%;
        }
    </style>

转载于:https://www.cnblogs.com/tieway59/p/10706792.html