效果图动画后

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. 精通Web Analytics 2.0 （6） 第四章：点击流分析的奇妙世界：实际的解决方案

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第四章:点击流分析的奇妙世界:实际的解决方案 到开始实际工作的时候了.哦耶! 在本章中,您将了解到一些最重要的网络分析报告,我将 ...

  2. BZOJ 1503: [NOI2004]郁闷的出纳员

    1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 10526  Solved: 3685[Submit][Stat ...

  3. myeclipse给项目改了名字，但部署tomcat的项目名还是原来的

    如标题所示: 在myeclipse中按F2改了项目名称,之前在tomcat中部署的名称是另一个,再次重新部署,永远是上一个的旧名称 解决办法: 项目点右键-properties-左上角搜索框输入web ...

  4. redis之理解

    http://www.cnblogs.com/stephen-liu74/category/354125.html

  5. 网络中两台主机的通信过程(TCP)

    两台主机通信有两种情况:1.在同一网段中 2.不在同一网段中 (1.)在同一网段的通信过程 主机在应用层上的操作: TCP/IP协议上tcp的端口对应的各种应用程序,客户机要访问某个应用程序就会要求打 ...

  6. zabbix添加监控主机(三)

    zabbix添加监控服务器. zabbix添加监控服务器(以添加10.10.100.137为例) (1)创建要监控的主机.点击配置(configuration)–>主机(host) –>创 ...

  7. ubuntu 系统使用

    1.ubuntu的鼠标,用起来总是感觉比windows的快一点儿,可以用以下命令来调整为默认的 root@admin-pc:~$ xset m default 2.mysql默认不允许远程连接,可以在 ...

  8. Maven、SecureCRT使用问题汇集

    1 Maven 无法下载pom文件中相关的依赖包 该问题可能有很多原因,我的原因是host中的localhost被修改了,改回来即可! 看起来好像出了一些网络原因的问题,顺着这个方向搜索,发现国外也有 ...

  9. JS高级群的日常

    北京-z兄*10031*33) 2015/6/5 13:38:01北京-逍遥君武*5611*7) 2015/6/5 13:3*:082上海-goesby<woshixuleijava@****. ...

  10. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...