SVG实现导航动画
效果图动画后
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实现导航动画的更多相关文章
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
- svg路径蒙版动画
svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...
- css3 svg路径蒙版动画
css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...
- svg描边路径动画
svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
随机推荐
- Outlook2016 新装进阶操作指南
启动图片自动下载 键盘上同时按下WIN+R,弹出运行输入框,输入outlook,回车后打开Outlook 依次点击左上角文件,选项,信任中心,信任中心设置,自动下载 在窗口右边反勾选"在HT ...
- 关于WEB项目的一点想法
有点失落.迷茫,差点在上班的时候发了火.原因是之前离职的一位同事,在代码里不加注释,而且百般偷懒,致使很多应该的验证没有验证,很多应该考虑到的情况没有考虑.因为是老员工,我相比他来说是新员工.气势上总 ...
- 面试题目——《CC150》递归与动态规划
面试题9.1:有个小孩正在上楼梯,楼梯有n个台阶,小孩一次可以上1阶.2阶或者3阶.实现一个方法,计算小孩有多少种上楼梯的方式. 思路:第4个数是前三个数之和 注意:能不能使用递归,能不能建立一个很大 ...
- [Unity3D] Normal map、Diffuse map 和 Speculer map
Normal map : Normal map (法线贴图) 它的作用是模拟出高模上的一些细节纹理,特别是将高模上的圆滑和粗糙度投射到低模上,让低模也有高模的效果. 因为高模的面数非常多,导入引擎后电 ...
- Solr学习总结(一)Solr介绍
最近一直在搞Solr的问题,研究Solr 的优化,搜索引擎的bug修改等,这几天终于有时间,闲下来总结分享,以便大家参考,与大家一起来共同学习. Solr是一个基于Lucene的全文搜索引擎,同 ...
- 如何解决mathpage.dll或MathType.dll文件找不到问题
解决方法(具体图文教程): 步骤一 要确保路径被office信任.依次打开word->文件->选项->信任中心->信任中心设置->添加新位置,添加C:\Program F ...
- [Kerberos] User Ticket Management
Kerberos客户端常用命令包括 kinit, klist, kdestroy, and kpasswd,用户使用这些命令管理自己的 ticket. 此外,每台运行Kerberos的机器应该都配置/ ...
- HDU 3966 Aragorn's Story 树链剖分
Link: http://acm.hdu.edu.cn/showproblem.php?pid=3966 这题注意要手动扩栈. 这题我交g++无限RE,即使手动扩栈了,但交C++就过了. #pragm ...
- 两个int的和判断溢出
long a,b; cin>>a>>b; long i; i = a+b; if((i^a)<0 && (i^b)<0) cout<<& ...
- 双系统Ubuntu分区扩容过程记录
本人电脑上安装了Win10 + Ubuntu 12.04双系统.前段时间因为在Ubuntu上做项目要安装一个比较大的软件,导致Ubuntu根分区的空间不够了.于是,从硬盘又分出来一部分空间,分给Ubu ...