首先简单的描述一下svg中两个属性：

stroke-dasharray：表示每个虚线的长短。

stroke-dashoffset：表示首个虚线的偏移量。

当两者都特别大的时候就会消失掉

直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>边框逐渐消失</title>

    <style>

        .br_hide{

            text-decoration:none;

        }

        .br_hide:hover{

            text-decoration:none;

        }

        .br_hide:hover text{

            fill:#913F3F;

        }

        .br_hide:hover g{

            animation:first1 3s linear infinite;

            stroke:#913F3F;

            stroke-width:2;

            -moz-animation:first1 0.5s linear;

            -webkit-animation:first1 0.5s linear;

        }

        @-moz-keyframes first1

        {

            0%   {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;}

            100%  {stroke-dasharray: 500%, 0%;stroke-dashoffset: 0%;}

        }

        @-webkit-keyframes first1

        {

            0%   {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;}

            100%  {stroke-dasharray: 500%, 250%;stroke-dashoffset: 0%;}

        }

    </style>

</head>

<body>

<a href="#" class="br_hide">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">

        <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/>

        <text x="10" y="24">王玉娇</text>

        <g fill="none" >

            <rect width="80" height="36"/>

        </g>

    </svg>

</a>

<a href="#" class="br_hide">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">

        <rect fill="none" stroke="#C8E3CB" stroke-width="2" width="80" height="36"/>

        <text x="10" y="24">王玉娇</text>

        <g fill="none" >

            <rect width="80" height="36"/>

        </g>

    </svg>

</a>

<a href="#" class="br_hide">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">

        <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/>

        <text x="10" y="24">王玉娇</text>

        <g fill="none" >

            <rect width="80" height="36"/>

        </g>

    </svg>

</a>

</body>

</html>

即可实现效果。

利用svg描边+css3实现边框逐渐消失小动画的更多相关文章

  1. （转）利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. CSS3之边框样式（动画过渡）

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  3. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

  5. 【CSS3】横屏引导小动画

    演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...

  6. jQuery/CSS3 图片边框线条变换动画

    在线演示 本地下载

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. SVG描边动画实现过程

    准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小.   2.将PS中切好的图片直接拖拽到AI中     3.使用AI中的钢 ...

  9. SVG 和 CSS3 实现一个超酷爱心 Like 按钮

    在现代网页中,我们经常可以在一些文章.视频和图片页面上找到"Like"按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢.大部分"Like"按钮是纯文本 ...

随机推荐

  1. Java的家庭记账本程序（A）

    日期:2019.2.1 博客期:028 星期五 其实我早就开始开发“家庭记账本”的软件了,只不过写博客写的有点晚,我是打算先做web的!因为Android Studio的教程,还是要对应版本,好多问题 ...

  2. spring mvc底层(DispacherServlet)的简单实现

    使用过spring mvc的小伙伴都知道,mvc在使用的时候,我们只需要在controller上注解上@controller跟@requestMapping(“URL”),当我们访问对应的路径的时候, ...

  3. hiho1460 rmq模板题

    好久没做rmq的题了,今天写了一遍,感觉打表有点像区间dp /* 给定长为n的字符串,要求在字符串中选择k个字符, 选择的子系列字典序最小 因为选择k个字符,那么就是去掉n-k个字符 那么[1,n-k ...

  4. SpringMvc框架MockMvc单元测试注解及其原理分析

    来源:https://www.yoodb.com/ 首先简单介绍一下Spring,它是一个轻量级开源框架,简单的来说,Spring是一个分层的JavaSE/EEfull-stack(一站式) 轻量级开 ...

  5. MySQL监控系统Lepus的搭建

    现在流行的监控系统很多,选择一个合适自己的就可以了,例如Zabbix.Nagios:监控MySQL为主的有MySQLMTOP.Lepus.本文主要介绍快速部署lepus以及监控MySQL,因为作为DB ...

  6. python面向对象三大特性之继承

    继承是创建新类的方法,以下是几个概念 父类,基类,超类: 被继承的类 子类,派生类:继承而产出的类 单继承:继承一个父类 多继承:继承多个父类 继承: 什么是什么的关系 父类中没有的属性,在字类中出现 ...

  7. 支持向量机-SMO算法简化版

    SMO:序列最小优化 SMO算法:将大优化问题分解为多个小优化问题来求解 SMO算法的目标是求出一系列的alpha和b,一旦求出这些alpha,就很容易计算出权重向量w,并得到分隔超平面 工作原理:每 ...

  8. 报错ERR_CONNECTION_REFUSED，如何解决（原创）

    当我访问我的一个后天地址的时候,突然出现了ERR_CONNECTION_REFUSED,但是之前是可以访问的. 我先ping了下这个网址,发现是OK的 然后我想可能是80端口有问题,也就是说可能是WE ...

  9. python全栈开发day73-Django认证系统

    一.Form组件 day73 2018-08-10 1. 内容回顾 1. form表单组件 1. 常用字段 1. CharField() 2. ChoiceField() 2. 参数或配置 1. la ...

  10. linux查看文件的后几行

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABiCAIAAACAksEXAAAZuUlEQVR4nO2dzdmzuq6G0wRV0ARNMM