css+svg实现按钮悬浮边框动画效果代码-html代码-BFW代码库

css+svg实现按钮悬浮边框动画效果代码

代码语言：html

所属分类：悬停

代码描述：css+svg实现按钮悬浮边框动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html,css {
            width: 100%;
            height: 100%
        }

        .position {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            margin-top: 15%
        }

        #workarea {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #1e1a3e;
            font-family: Raleway
        }

        #personal {
            color: white;
            text-decoration: none;
            position: absolute;
            bottom: 15px;
            right: 2%
        }

        .spot {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0
        }

        .svg-wrapper {
            margin-top: 0;
            position: relative;
            width: 150px;
            height: 40px;
            display: inline-block;
            border-radius: 3px;
            margin-left: 5px;
            margin-right: 5px
        }

        #shape {
            stroke-width: 6px;
            fill: transparent;
            stroke: #009FFD;
            stroke-dasharray: 85 400;
            stroke-dashoffset: -220;
            transition: 1s all ease
        }

        #text {
            margin-top: -35px;
            text-align: center
        }

        #text a {
            color: white;
            text-decoration: none;
            font-weight: 100;
            font-size: 1.1em
        }

        .svg-wrapper:hover #shape {
            stroke-dasharray: 50 0;
            stroke-width: 3px;
            stroke-dashoffset: 0;
            stroke: #06D6A0
        }
    </style>
</head>
<body>
    <div.........完整代码请登录后点击上方下载按钮下载查看