利用SVG和css3实现炫酷的边框动画

2024年4月1日 132次阅读 来源: 93回忆录 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>line</title>
    </head>
    <style>
        .empat {
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 200px;
            background-color: #ddd
        }
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px
        }
        .empat svg line{
            stroke-width: 10;
            stroke: #000;
            fill: none;
            stroke-dasharray: 200;
            -webkit-transition: -webkit-transform .6s ease-out;
            transition: transform .6s ease-out;
        }
        .empat:hover svg line.top {
            -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
        }
        .empat:hover svg line.left {
            -webkit-transform: translateY(400px);
            transform: translateY(400px);
        }
        .empat:hover svg line.bottom {
            -webkit-transform: translateX(400px);
            transform: translateX(400px);
        }
        .empat:hover svg line.right {
            -webkit-transform: translateY(-400px);
            transform: translateY(-400px);
        }
    </style>
    <body>
        <div class='empat'>
            <svg>
                <line class='top' x1='0' y1='0' x2='600' y2='0'></line>
                <line class='left' x1='0' y1='200' x2='0' y2='-400'></line>
                <line class='bottom' x1='-400' y1='200' x2='200' y2='200'></line>
                <line class='right' x1='200' y1='600' x2='200' y2='0'></line>
            </svg>
        </div>
    </body>
    </html>```
    
    利用SVG实现边框效果
    
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .aa{
        position: relative;
        width: 120px;
        height: 42px;
        color: #008fe4;
        text-align: center;
        line-height: 42px;
        webkit-transition: all .3s linear;
        transition: all .3s linear;
    }
    .aa:hover{
        background-color: transparent;
        color: #008fe4
    }
    .aa svg{
        position: absolute;
        top: -1px;
        left: -1px;
        width: 120px;
        height: 42px
    }
    .aa svg rect {
        stroke: #008fe4;
        stroke-width: 2px;
        stroke-dashoffset: 0;
        -webkit-transition: all .9s cubic-bezier(.19,1,.22,1);
        transition: all .9s cubic-bezier(.19,1,.22,1);
        stroke-dasharray: 324;
    }
    .aa:hover svg rect {
        stroke: #008fe4;
        stroke-width: 4px;
        stroke-dasharray: 90 210;
        stroke-dashoffset: -175;
    }
</style>
<body>
    <div class='aa'>
        <svg><rect x="0" y="0" width="120" height="42" fill="none" stroke='#008fe4' stroke-width='4'></rect></svg>
        参与投票
    </div>
</body>
</html>
    原文作者：93回忆录
    原文地址: https://segmentfault.com/a/1190000005904589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞