利用SVG和css3實現炫酷的邊框動畫

93回憶錄發表於2019-02-16
SVGCSSS3動畫

    <!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>

相關文章