<style>

  div{

    width: 420px;

    height: 200px;

    background: url('./img/timg.jpg') no-repeat;

  }

  polyline{

    stroke: #3366cc; /* 线段颜色 */

    stroke-width: 4;  /* 线段宽度 */

    fill: none;  /* 描绘不填充 */

    stroke-dasharray: 1160px;   /* 线段总长度 */

    stroke-dashoffset: 1160px;  /* 线段未绘制的长度 */

    transition: .8s;

  }

  div:hover polyline{

    stroke-dashoffset: 0px;

  }

  </style>

</head>

<body>

  <div class="svgTest">

    <svg width="420" height="200">

      <polyline points="10,10 410,10 410,190 10,190 10,10"></polyline>

      <!-- 绘制路径的四个点 -->

    </svg>

  </div>

CSS笔记 - SVG Polyline 图片绘制动画边框的更多相关文章

  1. css奇技淫巧—box-shadow与outline绘制多重边框效果

    css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...

  2. HTML+CSS笔记 表格,超链接,图片,表单

    表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...

  3. CSS笔记（十一）CSS3之边框

    参考:http://www.w3school.com.cn/css3/css3_border.asp 圆角边框 <!DOCTYPE html> <html> <head& ...

  4. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  5. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  6. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  7. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  8. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  9. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

随机推荐

  1. Windows App开发之文件与数据

    读取文件和目录名 这一节開始我们将陆续看到Windows App是如何操作文件的. 在Windows上读取文件名称.目录名 首先我们在XAML中定义一个Button和TextBlock,将读取文件/目 ...

  2. 开源企业IM-免费企业即时通讯-ENTBOOST V0.9版本号公布

    ENTBOOST V0.9版本号公布,更新内容:1.完好多人群组聊天,提高群组聊天性能及稳定性:2.苹果IOS SDK.添加联系人管理功能,优化API和内部流程.修复部分BUG.3.添加企业应用功能集 ...

  3. MongoDB 基本使用

    数据库基本操作 连接到mongoDBserver  1 ./bin/mongo 127.0.0.1:12345  查看当前数据库 1 2 3 > show dbs admin  (empty) ...

  4. WordPress改动新用户注冊邮件内容--自己定义插件

    有些开放用户注冊功能的WordPress站点,可能有这么一项需求,就是用户注冊成功后,系统会分别给站点管理员和新用户发送一封通知邮件.给管理员发送的是新用户的username和Email,给刚刚注冊的 ...

  5. Redis封装之Set

    RedisSetService: /// <summary> /// Set:用哈希表来保持字符串的唯一性,没有先后顺序,存储一些集合性的数据 /// 1.共同好友.二度好友 /// 2. ...

  6. Tomcat部署项目修改浏览器上猫咪头像

    一.发现问题用tomcat部署项目,在浏览器标签也上发现了tomcat猫咪图.要把这个图修改掉. 二.解决问题apache-tomcat-5.5.28\webapps\ROOT下的ico文件,将需要替 ...

  7. MVC5发展历程，从MVC2谈起

    目前,MVC已经发布了5个版本,不包括一些临时的版本,为了更好的了解MVC5,知道MVC的发展历程是非常重要的.本篇随笔主要讲解3个版本的内容及其新特性. 1.MVC 2,发布日期:2010年3月 部 ...

  8. 请允许我成为你的夏季——shiro、jdbcInsertall

    这两天总是觉得自己被关进了一个大笼子,日子拮据.生活不就是这样吗,一边觉得自己很差劲,一边又想成为一个更好的自己.可那又有什么办法呢,万物皆有裂痕,但那又怎样,那是光照进来的地方啊. 开始学习shir ...

  9. ES6学习笔记（九）Set和Map数据结构

    1.set 基本等于Java的Set集合类型,无序不可重复集,常被用来去重. 基本用法 const s = new Set();//通过Set()构造函数创建 [2, 3, 5, 4, 5, 2, 2 ...

  10. BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)

    Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作,操作分三种: Cv x v':把第x个字符串的权值修改为v' Cs x a':把第x个字符串修改成a ...