<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. poj3169 差分约束系统

    题意: 从1到n,n个数,从左向右依次排列. 给定两种形式的约束条件: 1.xi与yi的最大距离为dk 2.xi与yi的最小距离为dk 问满足这些限定条件的情况下,数1和n的最大距离是多少?(若约束条 ...

  2. 两天学会DirectX 3D之入门

    环境配置以及背景知识 环境 Windows 8.1 64bit VS2013 Microsoft DirectX SDK (June 2010) NVDIA Geforce GT755 环境的配置參考 ...

  3. thinkphp5项目--企业单车网站（三）

    thinkphp5项目--企业单车网站(三) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  4. HtmlHelper的扩展分页方法

    一.新建一个空MVC项目,命名为MVCAppPager 二.新建一个文件夹PageHelper,在文件夹下新建接口IPageList以及实现类PageList IPageList接口: public ...

  5. DevExpress Report打印边距越界问题

    DevExpress  Report Print的时候,出现这样的问题:one or more margins are set outside the printable area of the pa ...

  6. Flex XML/XMLList 常用操作

    1       XML.XMLList操作 Flex对xml提供了很多强大而灵活的操作.相对于其他语言,flex对xml的格式要求不那么苛刻,只要符合基本格式语法的字符串,flex能非常简单的转换成x ...

  7. 多个ComboBox绑定同一个数据源出现的问题解决办法

    出现问题: 当多个ComboBox绑定同一个数据源后,只要更改其中一个的选择项时,其它的ComboBox也跟着改变了 解决办法: DataTable dt = new DataTable(); dt ...

  8. Android 学习笔记进阶十二之裁截图片

    package xiaosi.cut; import java.io.File; import android.app.Activity; import android.content.Intent; ...

  9. Onvif开发之基础介绍篇

    什么是Onvif协议,谁开启了Onvif时代? ONVIF:原意为 开放型网络视频接口论坛,即 Open Network Video Interface Forum ,是安讯士.博世.索尼等三家公司在 ...

  10. 简单说一下 JSON和JSONP

    JSON和JSONP,但从缩写看,可能会以为他们是很相似的两个名词,但他们除了缩写相似外,他们是两种类型的概念. 首先: JSON(JavaScript Object Notation)即JavaSc ...