<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. leetcode第一刷_Text Justification

    这个题的接受率好低,搞得我一直不敢做.后来认真的看了一下题目,不是非常难嘛.字符串的题目ac率就是低,除了难,还由于它的測试用例太多. 思路不难,主要是由于特殊情况太多.纯模拟,我把全部的情况罗列一下 ...

  2. dropify,不错的图片上传预览插件

    引言 传统的图片上传,很丑.点击选择之后,还无法预览. 有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦. 用这个dropify,就可以解决之歌问题. 看效果 用法 1.引入文件,需要jque ...

  3. OpenGL编程逐步深入（三）在窗口中显示一个三角形

    这一节教程的内容会比较少,我们仅仅是对上一节教程中的代码进行扩展,在窗口中渲染一个三角形出来. 本节我们以下图所示正方形来讲解OpenGl中的坐标系统.当沿着Z轴负方向看时,可见顶点的坐标必须在这个正 ...

  4. Atcoder ABC 069 C - 4-adjacent D - Grid Coloring

    C - 4-adjacent Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement We have ...

  5. Aix下查看内存命令

    1. 查看物理内存配置 # lsdev -Cc memory  查看配置的物理内存设备,下面为其输出示例:  L2cache0 Available L2 Cache   mem0 Available ...

  6. 关于servlet的web.xml映射

    1.原理 <servlet> <!-- servlet的名字,随便起个名,但和下面的servlet名一致 --> <servlet-name>hello</s ...

  7. Vuejs2.0构建一个彩票查询WebAPP(2)

    一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...

  8. request.getSession().getServletContext().getRealPath("")获取工程目录 路径修改

    使用request.getSession().getServletContext().getRealPath("")获取工程目录. 设置server Locations在serve ...

  9. Springboot源码——应用程序上下文分析

    前两篇(Spring MVC源码——Root WebApplicationContext 和 Spring MVC源码——Servlet WebApplicationContext)讲述了spring ...

  10. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...