【SVG的描边动画】

Sky_Bug

已于 2024-03-14 11:22:08 修改

阅读量389

点赞数 7

文章标签： css3 前端

于 2024-03-14 11:18:38 首次发布

本文链接：https://blog.csdn.net/Sky_Bug/article/details/136702738

版权

该篇文章展示了如何在HTML和CSS中使用SVG创建动态描边动画，模拟划过效果，应用于招聘列表中的职位展示，如字节跳动的国际化电商UX设计师职位。

摘要由CSDN通过智能技术生成

发现个挺不错的效果

SVG的描边动画做划过效果
【复制粘贴即可】

<!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>
        *{padding: 0;margin: 0;list-style: none;}
        #container{
            margin: 0 auto;
            width: 550px;
        }
        #container ul{
            padding: 30px 0px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        #container ul li{
            position: relative;
            margin: 10px 0px;
        }
        #container ul li:hover .svg-bg{
            opacity: .7;
        }
        #container ul li:hover .svg-bg path{    
            stroke-dashoffset:0;
        }
        #container ul li .tag{
            display: inline-block;
            background-color: red;
            color: #fff;
            font-size: 12px;
            padding: 3px 5px;
            font-weight: bold;
        }
        #container ul li .title{
            font-weight: bold;
            font-size: 18px;
            margin: 5px 0px;
        }
        #container ul li .desction{
            font-size: 13px;
            color: rgb(193, 193, 192);
        }
        .svg-bg{
            opacity: 0;
            fill: none;
            pointer-events: none;
            stroke: #f60c3e;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            stroke-width: 6px;
            z-index: 0;
            transition: all .15s ease-in-out;
            transform: scale(1.3);
        }
        .svg-bg path{
            stroke-dasharray: 1000;
            transition: all .6s cubic-bezier(.72,.24,.87,.58);
            stroke-dashoffset: 1000;
        }
    </style>
</head>
<body>
    
    <div id="container">
        <ul>
            <li>
                <div class="tag">上海</div>
                <div class="title">
                    字节跳动招国际化电商UX设计师
                </div>
                <div class="desction">
                    商品方向、五年工作经验
                </div>
                <svg class="svg-bg" viewBox="0 0 400 100" preserveAspectRatio="none">
                    <path d="M115 8C51 13 7 25 7 50s70 46 188 46c147 0 202-15 198-46-4-32-76-50-260-42"></path>
                </svg>
            </li>
            <li>
                <div class="tag">上海</div>
                <div class="title">
                    字节跳动招国际化电商UX设计师
                </div>
                <div class="desction">
                    商品方向、五年工作经验
                </div>
                <svg class="svg-bg" viewBox="0 0 400 100" preserveAspectRatio="none">
                    <path d="M115 8C51 13 7 25 7 50s70 46 188 46c147 0 202-15 198-46-4-32-76-50-260-42"></path>
                </svg>
            </li>
            <li>
                <div class="tag">上海</div>
                <div class="title">
                    字节跳动招国际化电商UX设计师
                </div>
                <div class="desction">
                    商品方向、五年工作经验
                </div>
                <svg class="svg-bg" viewBox="0 0 400 100" preserveAspectRatio="none">
                    <path d="M115 8C51 13 7 25 7 50s70 46 188 46c147 0 202-15 198-46-4-32-76-50-260-42"></path>
                </svg>
            </li>
            <li>
                <div class="tag">上海</div>
                <div class="title">
                    字节跳动招国际化电商UX设计师
                </div>
                <div class="desction">
                    商品方向、五年工作经验
                </div>
                <svg class="svg-bg" viewBox="0 0 400 100" preserveAspectRatio="none">
                    <path d="M115 8C51 13 7 25 7 50s70 46 188 46c147 0 202-15 198-46-4-32-76-50-260-42"></path>
                </svg>
            </li>
        </ul>
    </div>
</body>
</html>