效果图动画后

html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Animated SVG Hover Buttons</title>
<link rel="stylesheet" href="css/style.css">
</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=""><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=""><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=""><span class="spot"></span>Button 3</a>
</div>
</svg>
</div>
<!--End button --> </div>
</div>
</body>
</html>

css

* {
margin:;
padding:;
} 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:;
left:;
}
.svg-wrapper {
margin-top:;
position: relative;
width: 150px;
/*make sure to use same height/width as in the html*/
height: 40px;
display: inline-block;
border-radius: 3px;
margin-left: 5px;
margin-right: 5px
}
#shape {
stroke-width: 4px;/*线的宽度*/
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:;
font-size: 1.1em;
}
.svg-wrapper:hover #shape {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset:;
stroke: #06D6A0;
}

SVG实现导航动画的更多相关文章

  1. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  2. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  3. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

  4. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  5. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

  6. svg路径蒙版动画

    svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...

  7. css3 svg路径蒙版动画

    css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...

  8. svg描边路径动画

    svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  9. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

随机推荐

  1. BZOJ 1432: [ZJOI2009]Function

    1432: [ZJOI2009]Function Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1046  Solved: 765[Submit][Sta ...

  2. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  3. Akka框架使用注意点

    1.mailbox Akka的每个actor默认有一个mailbox,按照FIFO顺序单线程处理.在抛出异常导致父actor根据设置的监管策略执行重启或恢复操作时,会从触发异常的消息的后续消息开始处理 ...

  4. 消息中间件:RabbitMQ基本探索

    RabbitMQ是一个基于AMQP协议(Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中 ...

  5. SQL Server数据库常用函数

    好久没学习新知识了.今天学了下sql的一些常用语句.人还是需要不断学习进步的 否则只能停滞不前. 先从最简单的一句开始说起吧. select *from 表名 这里*的含义 表示了表的各字段,以逗号隔 ...

  6. K米点歌APP评测

    K米APP评测 产品简介 K米点歌是一款免费的社交K歌手机应用,其手机点歌功能主要在KTV.夜总会,酒吧等K歌场所中使用,当前提供iPhone版本及安卓版本下载使用.——百度百科 评测版本 K米点歌4 ...

  7. php网址显示excel表格内容

    /** * excel表格内容在网页中显示 * * 首先需要下载PHPExcel 工具包 * 网址: http://phpexcel.codeplex.com/releases/view/119187 ...

  8. win7系统中如何使文件显示出扩展名

    win7系统中如何使文件显示出扩展名-------------------- 1.点击计算机-->>点击组织,然后选择"文件夹及搜索选项"-->> ---- ...

  9. Yii rules常用规则

    public function rules() {     return array(         //必须填写         array('email, username, password, ...

  10. OpenGL Common Mistakes

    https://www.opengl.org/wiki/Common_Mistakes Do not use constructors/destructors to initialize/destro ...