HTML5+CSS3从入门到精通如何利用SVG和css3实现炫酷的边框动画-职坐标

HTML5+CSS3从入门到精通如何利用SVG和css3实现炫酷的边框动画

沉沙 2018-06-12 来源：阅读 889 评论 0

摘要：本篇教程讲解了如何利用SVG和css3实现炫酷的边框动画，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

    <!DOCTYPE html>
    <html>
    <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>
            <svg>
                <line x1='0' y1='0' x2='600' y2='0'></line>
                <line x1='0' y1='200' x2='0' y2='-400'></line>
                <line x1='-400' y1='200' x2='200' y2='200'></line>
                <line 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>
        <svg><rect x="0" y="0" width="120" height="42" fill="none" stroke='#008fe4' stroke-width='4'></rect></svg>
        参与投票
    </div>
</body>
</html>

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！

html5+css3从入门到精通源码 html5+css3从入门到精通下载 html5+css3开发工具

本文由 @沉沙发布于职坐标。未经许可，禁止转载。