前端实现svg描边动画

最新推荐文章于 2024-09-13 23:32:49 发布

Mack_yong

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量162

点赞数

分类专栏：动画文章标签：前端

本文链接：https://blog.csdn.net/u011053926/article/details/131918087

版权

动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用CSS和JavaScript在鼠标移入SVG图标时创建描边动画效果。通过调整元素尺寸、设置描边属性和动画，当鼠标悬停在SVG图形上时，图形的边框会逐渐显示出来。

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

鼠标移入实现svg描边
直接上代码！！
css

 body {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul {
        padding: 100px 50px;
        display: flex;
    }

    li {
        list-style: none;
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border: 1px solid #ccc; */
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all .3s;
        cursor: pointer;
        transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
        background: linear-gradient(to top right, #0bddd6, #528cf9);
    }

    li svg {
        width: 64px;
        height: 64px;
        transition: all .3s;
        transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    li:hover {
        width: 100px;
        height: 100px;
        background: linear-gradient(to top right, #0bddd6, #528cf9);
    }

    li:hover svg {
        width: 70px;
        height: 70px;

    }

    .p {
        stroke: #fff;
        stroke-width: 20;
        stroke-dasharray: var(--l);
        stroke-dashoffset: var(--l);
        /* animation: stroke 6s forwards; */
        stroke-linecap: round;
        animation: none;
    }

    @keyframes stroke {
        to {
            stroke-dashoffset: 0;
        }
    }

HTML

 <ul>
        <li>

            <svg class="icon" viewBox="0 0 1024 1024">
                <path class="p"
                    d="M363.52 71.68l-0.0512 51.2H660.48v-51.2h61.44v51.2h161.28a30.72 30.72 0 0 1 30.3104 25.7536L913.92 153.6v768a30.72 30.72 0 0 1-30.72 30.72H140.8a30.72 30.72 0 0 1-30.72-30.72V153.6a30.72 30.72 0 0 1 30.72-30.72h161.2288l0.0512-51.2h61.44zM302.0288 184.2688L171.52 184.32v706.56h680.96V184.32l-130.56-0.0512V235.52h-61.44V184.2688H363.4688L363.52 235.52H302.08l-0.0512-51.2512zM742.4 660.48v61.44h-460.8v-61.44h460.8z m0-230.4v61.44h-460.8V430.08h460.8z"
                    fill="transparent"></path>
            </svg>
        </li>
        <li>
            <svg t="1690189725574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1069">
                <path class="p"
                    d="M414.272 940.16a44.8 44.8 0 0 1-44.8-44.8V618.496a44.8 44.8 0 0 1 16.064-34.368l268.8-224.832a44.8 44.8 0 1 1 57.6 68.672l-252.48 211.2v117.632l33.408-46.144a44.8 44.8 0 0 1 60.608-11.392l114.176 73.664 174.208-590.08-620.224 291.52 94.336 67.968a44.8 44.8 0 1 1-52.352 72.704L107.52 502.592a44.8 44.8 0 0 1 7.104-76.8l695.296-326.784 0.704-0.32a95.104 95.104 0 0 1 108.8 9.664c7.488 7.36 24.96 27.968 11.584 88.704 0 1.024-0.512 2.048-0.768 3.008L736.64 855.808a44.8 44.8 0 0 1-67.264 24.96l-128.768-83.2-89.6 123.776a44.8 44.8 0 0 1-36.736 18.816z"
                    fill="#000000" fill-opacity="0" p-id="1070"></path>
            </svg>
        </li>
        <li>
            <svg t="1690192594740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1734" width="64" height="64">
                <path class="p"
                    d="M621.653333 96a32 32 0 0 1 0 64H257.578667A97.578667 97.578667 0 0 0 160 257.578667v508.842666a97.578667 97.578667 0 0 0 97.578667 97.578667h507.264a97.578667 97.578667 0 0 0 97.578666-97.152l1.578667-356.928a32 32 0 0 1 64 0.277333l-1.578667 356.928a161.578667 161.578667 0 0 1-161.578666 160.874667H257.578667A161.578667 161.578667 0 0 1 96 766.421333V257.578667A161.578667 161.578667 0 0 1 257.578667 96H621.653333z"
                    fill="transparent" p-id="1735"></path>
                <path class="p"
                    d="M753.258667 113.557333L455.552 409.6a64 64 0 0 0-18.88 45.376v53.845333a67.242667 67.242667 0 0 0 65.770667 67.242667l50.986666 1.109333a64 64 0 0 0 45.738667-17.813333L902.826667 267.946667a107.946667 107.946667 0 0 0 3.242666-152.490667l-1.450666-1.493333a107.029333 107.029333 0 0 0-151.338667-0.426667z m106.538666 46.144a43.946667 43.946667 0 0 1-1.322666 62.08L554.88 513.194667l-51.008-1.130667a3.242667 3.242667 0 0 1-3.178667-3.242667v-53.845333L798.378667 158.933333a43.029333 43.029333 0 0 1 58.112-2.346666l3.306666 3.114666z"
                    fill="transparent" p-id="1736"></path>
                <path class="p" d="M772.330667 154.858667l94.677333 95.274666-45.397333 45.098667-94.677334-95.253333z"
                    fill="transparent" p-id="1737"></path>
            </svg>
        </li>
        <li>
            <svg t="1690192704164" class="icon" viewBox="0 0 1309 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1896" width="64" height="64">
                <path
                class="p" 
                    d="M1196.889302 23.813953a85.825488 85.825488 0 0 1 85.825489 85.825489v772.524651a85.825488 85.825488 0 0 1-85.825489 85.825488h-114.44986a28.600558 28.600558 0 1 1-57.22493 0H281.314233a28.600558 28.600558 0 1 1-57.224931 0H109.639442A85.825488 85.825488 0 0 1 23.813953 882.164093V109.639442A85.825488 85.825488 0 0 1 109.639442 23.813953H1196.889302z m28.624372 801.12521H81.01507v57.22493a28.600558 28.600558 0 0 0 28.624372 28.600558H1196.889302a28.600558 28.600558 0 0 0 28.624372-28.600558v-57.22493zM939.389023 81.038884H109.639442a28.600558 28.600558 0 0 0-28.600558 28.600558v658.074791h858.350139V81.038884z m257.500279 0h-200.275349v686.675349h228.899721V109.639442a28.600558 28.600558 0 0 0-28.624372-28.600558z m-85.825488 429.175069a85.825488 85.825488 0 1 1 0 171.674791 85.825488 85.825488 0 0 1 0-171.698604z m0 57.224931a28.600558 28.600558 0 1 0 0 57.22493 28.600558 28.600558 0 0 0 0-57.22493zM674.506419 224.946605c15.312372 3.834047 24.647442 19.360744 20.813395 34.673116-9.049302 36.197209-13.407256 62.964093-13.264372 79.443349 0.166698 24.885581 4.381767 50.009302 12.740465 75.53786 20.71814 63.583256 20.71814 127.380837-0.047628 190.392558a28.624372 28.624372 0 1 1-54.343442-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255a305.223442 305.223442 0 0 1-15.574325-92.874419c-0.166698-22.313674 4.858047-53.248 15.00279-93.707907a28.600558 28.600558 0 0 1 34.673117-20.837209z m-169.483907 0.642976a28.600558 28.600558 0 0 1 18.003348 36.244838c-16.884093 50.152186-16.884093 100.780651 0.095256 152.790325 20.71814 63.583256 20.71814 127.357023-0.023814 190.368744a28.624372 28.624372 0 1 1-54.367255-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255-20.765767-63.630884-20.765767-126.880744 0.047627-188.797024a28.600558 28.600558 0 0 1 36.244838-17.979535z m-171.650977 0a28.600558 28.600558 0 0 1 17.979535 36.244838c-16.860279 50.152186-16.860279 100.780651 0.095256 152.790325 20.741953 63.583256 20.741953 127.357023-0.023814 190.368744a28.624372 28.624372 0 1 1-54.367256-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255-20.765767-63.630884-20.765767-126.880744 0.047628-188.797024A28.600558 28.600558 0 0 1 333.395349 225.589581z m777.692279 55.724652a85.825488 85.825488 0 1 1 0 171.67479 85.825488 85.825488 0 0 1 0-171.67479z m0 57.22493a28.600558 28.600558 0 1 0 0 57.22493 28.600558 28.600558 0 0 0 0-57.22493z m28.600558-171.674791a28.600558 28.600558 0 0 1 0 57.22493h-57.22493a28.600558 28.600558 0 0 1 0-57.22493h57.22493z"
                    fill="transparent" p-id="1897"></path>
            </svg>
        </li>
    </ul>

 let lis = document.querySelectorAll('ul>li');
    lis.forEach(li => {
        li.setAttribute('onmouseenter', 'over(event)')
        li.setAttribute('onmouseleave', 'out(event)')
    })

    function over (e) {
        let l = null
        let dom = e.target.children[0].children[0]
        l = dom.getTotalLength()
        console.log(l);
        dom.style.setProperty('--l', l)
        dom.style.animation = 'stroke 3s forwards'
    }
    function out (e) {
        let dom = e.target.children[0].children[0]
        dom.style.animation = 'none'
        dom.style.setProperty('--l', 0)
    }