<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. Hadoop HDFS (4) Hadoop Archives

    用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...

  2. shell 脚本去掉月份和天数的前导零

    #!/bin/sh # # shell 脚本去掉月份和天数的前导零 # 前面填 1 变成百位数,然后减 100 # 去掉前导零的通用方法 $((10#$(date +%m))) # 把字符串分割成数组 ...

  3. legend---五、如何优雅的实现多继承

    legend---五.如何优雅的实现多继承 一.总结 一句话总结:多继承可以通过把别人对象作为属性来调用属性的方法执行, 继承的本质也是为了调用方法和属性,而上述的方式可以满足 1.php中前端可以共 ...

  4. centos7 安装好python3 yum报错

    解决方法: 修改两个地方 vi /usr/bin/yum 将最前面的改为#! /usr/bin/python2 vi /usr/libexec/urlgrabber-ext-down #! /usr/ ...

  5. js易错点总结及 常见面试的坑

    最近在研究Javascript发现了其中一些比较灵异的事情.有点让人感到无语比如: var arr = [], arr2 = {}; console.log(typeof(arr) === typeo ...

  6. 参加2012 Openstack亚太技术大会

    参加2012 OpenStack亚太技术大会 OpenStack是一个由Rackspace发起.全球开发者共同参与的开源项目,旨在打造易于部署.功能丰富且易于扩展的云计算平台.OpenStack企图成 ...

  7. 六台机器搭建RedisCluster分布式集群

    原文:六台机器搭建RedisCluster分布式集群 版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/de ...

  8. Top 16 Java 应用类 － 这些功能再也不用自己写了

    Java中有很多应用类.这些类定义静态方法能够解决非常多常见的问题.以下是通过5万个开源项目统计得到的最热门的16个应用类. 类按热门程序排列.类的方法也是按热门程序排序. 浏览这个类能够看看有哪些功 ...

  9. POJ 3613 Cow Relays 恰好n步的最短路径

    http://poj.org/problem?id=3613 题目大意: 有T条路.从s到e走n步,求最短路径. 思路: 看了别人的... 先看一下Floyd的核心思想: edge[i][j]=min ...

  10. spring 使用c3po连接池

    1 数据源:能够简单理解为数据的来源. 2 连接池:是缓存一定数量的数据库连接,当程序须要数据库连接的时候,直接在连接池中获取空暇的连接,使用完再放回连接池中,此连接又变成空暇状态,等待下一次连接. ...