html+css 鼠标hover文字下划线波浪效果-CFANZ编程社区

html+css 鼠标hover文字下划线波浪效果

效果

html+css 鼠标hover文字下划线波浪效果_波浪线滚动

思路

这个思路比较简单

如果是a标签，先把原有的下划线去掉

hover的时候设置一个波浪图片背景透明的png,或者是svg都行

背景图x轴重复，然后设置背景图的尺寸，设置动画横向移动就行了

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬浮 下划线波浪效果</title>
</head>
<body>
    <a href="">我是波浪我是波浪我是波浪我是波浪我是波浪我是波浪我是波浪<br>我是波浪我是波浪我是波浪我是波浪</a>

    <style>
        a:link{
            text-decoration: none;
        }

        a:hover{
            /* 设置背景图 x轴重复 左侧距离0 顶部距离100%*/
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
            /* 设置背景尺寸 宽20px 高自动 */
            background-size: 20px auto;

            animation: bolang 1s linear infinite;
        }

        @keyframes bolang{
            0%{
                background-position-x: 0;
            }
            100%{
                background-position-x: 20px;
            }
        }
    </style>
</body>
</html>

0 条评论