<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. USACO2002 Open:雄伟的山峦

    简要题意: 奶牛们在落基山下避暑,从它们的房子向外望去,可以看到N 座山峰构成的山峦,奶牛发现每座山峰都是等腰三角形,底边长度恰好是高度的两倍.所以山峰的顶点坐标可由两个底部端点求出.设i 座第山峰的 ...

  2. java中replaceAll反斜杠\ or java中replaceAll 括号[

    java中replaceAll反斜杠\   String s=new String("this is a \\"); s.replaceAll("\\",&qu ...

  3. noip 2018 day1 T1 铺设道路 贪心

    Code: #include<cstdio> using namespace std; int main() { int last=0,ans=0; int n;scanf("% ...

  4. BZOJ3130: [Sdoi2013]费用流(二分，最大流)

    Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识.    最大流问题:给定一张有向图表示运输网络,一个源点S和一个汇点T,每条边都有最大流量.一个合法的网络 ...

  5. Nginx安装与升级（包括虚拟主机）

    Nginx WEB服务器最主要就是各种模块的工作,模块从结构上分为核心模块.基础模块和第三方模块,其中三类模块分别如下: 核心模块:HTTP模块.EVENT模块和MAIL模块等: 基础模块:HTTP ...

  6. 对比《动手学深度学习》 PDF代码+《神经网络与深度学习 》PDF

    随着AlphaGo与李世石大战的落幕,人工智能成为话题焦点.AlphaGo背后的工作原理"深度学习"也跳入大众的视野.什么是深度学习,什么是神经网络,为何一段程序在精密的围棋大赛中 ...

  7. 学习《TensorFlow实战Google深度学习框架 (第2版) 》中文PDF和代码

    TensorFlow是谷歌2015年开源的主流深度学习框架,目前已得到广泛应用.<TensorFlow:实战Google深度学习框架(第2版)>为TensorFlow入门参考书,帮助快速. ...

  8. debian8平滑升级到debian9

    本文在Creative Commons许可证下发布. 首先,在升级时可以查看一下自己的版本号: uname -a ##查看内核信息 cat /etc/issue ##查看发行版本号   方法1:利用网 ...

  9. Springboot分布式限流实践

    高并发访问时,缓存.限流.降级往往是系统的利剑,在互联网蓬勃发展的时期,经常会面临因用户暴涨导致的请求不可用的情况,甚至引发连锁反映导致整个系统崩溃.这个时候常见的解决方案之一就是限流了,当请求达到一 ...

  10. webgoat 7.1 实战指南

    WSASP中文文档参考链接: http://www.owasp.org.cn/owasp-project/2017-owasp-top-10 OWASP Top 10 2017中文版V1.3http: ...