HTML5网页设计

导航菜单

CSS3 SVG实现鼠标经过按钮边框动画

时间:2016-02-19 14:45来源:未知作者:user点击:
CSS代码: *{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}

CSS代码

*{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}


HTML代码:

<div id="workarea">
    <div class="position">
        <!--start button, nothing above this is necessary -->
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href="http://www.17sucai.com/"><span class="spot"></span>Button 1</a>
                </div>
            </svg>
        </div>
        <!--Next button -->
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href="http://www.17sucai.com/"><span class="spot"></span>Button 2</a>
                </div>
            </svg>
        </div>
        <!--Next button -->
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href="http://www.17sucai.com/"><span class="spot"></span>Button 3</a>
                </div>
            </svg>
        </div>
        <!--End button -->
    </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 SVG实现鼠标经过按钮边框动画</title>
    <link rel="stylesheet" href="css/button.css" />
    <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 id="workarea">
        <div class="position">
            <!--start button, nothing above this is necessary -->
            <div class="svg-wrapper">
                <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                    <rect id="shape" height="40" width="150" />
                    <div id="text">
                        <a href="http://www.17sucai.com/"><span class="spot"></span>Button 1</a>
                    </div>
                </svg>
            </div>
            <!--Next button -->
            <div class="svg-wrapper">
                <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                    <rect id="shape" height="40" width="150" />
                    <div id="text">
                        <a href="http://www.17sucai.com/"><span class="spot"></span>Button 2</a>
                    </div>
                </svg>
            </div>
            <!--Next button -->
            <div class="svg-wrapper">
                <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                    <rect id="shape" height="40" width="150" />
                    <div id="text">
                        <a href="http://www.17sucai.com/"><span class="spot"></span>Button 3</a>
                    </div>
                </svg>
            </div>
            <!--End button -->
        </div>
    </div>
</body>
</html>
上一篇:上一篇:两种CSS3按钮动画效果 上一篇:下一篇:没有了
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐