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

        line        .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);        }

利用SVG实现边框效果

.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;}    参与投票

#css、html、html5、svg#

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！