概述
效果图
操作步骤
一，添加框架标签
<a>
<svg>
<rect></rect>
</svg>
Kinghiee
</a>
注：div标签只是为了在最初编写程序的时候可以清楚找到外围，最后结束可以去掉
二，编写a标签样式
color: rgba(0,128,128,0.8);/*设置a字体颜色*/
display: block;/*a行级标签变为块级标签*/
text-align: center;/*居中*/
font-weight:bold;/*字体粗细*/
font-size: 20px;/*字体大小*/
text-decoration: none;/*去掉下划线*/
text-transform:uppercase;/*控制文本大小写*/
vertical-align: middle;
position: relative;/*相对定位*/
max-width: 300px;/*最大宽度*/
width: 100%;/*是a的宽度一直处于300px*/
background:transparent;/*背景为透明*/
float:left;/*左浮动*/
min-height: 60px;/*最小高度*/
max-height: 100px;/*最大高度*/
效果图
三，编辑SVG
.set_a_style svg{
position: absolute;/*绝对定位*/
left: 0;
top: 0;
height: 100%;/*和a标签同高*/
width: 100%;/*和a标签同宽*/
}
效果图
这个时候KINGHIEE不在中间，所以需要在a中加入line-height让字体居中
line-height: 60px;/*字体居中*/
效果图
现在基本样式已经出来，现在让我们编辑一下rect
四，编辑rect和字体动画
<rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
//x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
//y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
// fill 填充为无色
//宽高和a标签padding的宽高一致
接着添加样式
.set_a_style rect{
fill: none;
stroke: #f2625a;/*定义一条线，文本或元素轮廓颜色*/
stroke-width: 5;/*线宽*/
stroke-dasharray: 422,0;/*
stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距
如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10
两个参数或者多个参数时：一个表示长度，一个表示间距
如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
*/
transition: all 450ms linear 0s;/*过度时间*/
}
.set_a_style:hover{
font-weight: 900;
letter-spacing: 2px;/*字体间隔*/
transition: all 150ms linear 0s;/*过度*/
}
.set_a_style:hover rect{
stroke-width: 8;/*宽度又5变为8*/
stroke-dasharray: 50, 540;
stroke-dashoffset: 100;/*
这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的*/
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
五，总体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.set_a_style{
color: rgba(0,128,128,0.8);/*设置a字体颜色*/
display: block;/*a行级标签变为块级标签*/
text-align: center;/*居中*/
font-weight:bolder;/*字体粗细*/
font-size: 20px;/*字体大小*/
text-decoration: none;/*去掉下划线*/
text-transform:uppercase;/*控制文本大小写*/
vertical-align: middle;
position: relative;/*相对定位*/
max-width: 300px;/*最大宽度*/
width: 100%;/*是a的宽度一直处于300px*/
background:transparent;/*背景为透明*/
float:left;/*左浮动*/
min-height: 60px;/*最小高度*/
max-height: 100px;/*最大高度*/
line-height: 60px;/*字体居中*/
}
.set_a_style svg{
position: absolute;/*绝对定位*/
left: 0;
top: 0;
height: 100%;/*和a标签同高*/
width: 100%;/*和a标签同宽*/
}
.set_a_style rect{
fill: none;
stroke: #f2625a;/*定义一条线，文本或元素轮廓颜色*/
stroke-width: 5;/*线宽*/
stroke-dasharray: 422,0;/*
stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距
如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10
两个参数或者多个参数时：一个表示长度，一个表示间距
如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
*/
transition: all 450ms linear 0s;/*过度时间*/
}
.set_a_style:hover{
font-weight: 900;
letter-spacing: 2px;/*字体间隔*/
transition: all 150ms linear 0s;/*过度*/
}
.set_a_style:hover rect{
stroke-width: 8;/*宽度又5变为8*/
stroke-dasharray: 50, 540;
stroke-dashoffset: 100;/*
这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的*/
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
</style>
</head>
<body>
<a href="#" class="set_a_style">
<svg >
<rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
</svg>
kinghiee
</a>
</body>
</html>
最后
以上就是贪玩滑板为你收集整理的CSS3鼠标滑过矩形动画按钮svg的全部内容，希望文章能够帮你解决CSS3鼠标滑过矩形动画按钮svg所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复