CSS笔记 - SVG Polyline 图片绘制动画边框
<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 图片绘制动画边框的更多相关文章
- css奇技淫巧—box-shadow与outline绘制多重边框效果
css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...
- HTML+CSS笔记 表格,超链接,图片,表单
表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...
- CSS笔记(十一)CSS3之边框
参考:http://www.w3school.com.cn/css3/css3_border.asp 圆角边框 <!DOCTYPE html> <html> <head& ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- 18个超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...
- SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
- 程序猿必备的10款超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
随机推荐
- display,visibility,meta知识
<div style="display:">显示</div><div style="display:none;">隐藏不占位 ...
- vue 指令的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux samba服务器安装调试。
samba 做为主要的windown 和 Linux 通讯的服务器之一. 1. 查看是否安装了smb服务. #rpm -ga|grep samba 或者 #service smb status ...
- 51nod 最大子矩阵和
一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 我们可以降维,枚举矩形的长,然后算出一个一维数组,然后就转化成了最大字段和问题 #include< ...
- 【J2EE】在项目中理解J2EE规范
J2EE平台由一整套服务(Service),应用程序接口(API)和协议构成,它对开发企业级应用提供了功能支持.13个核心技术各自是JDBC, JNDI, EJB, RMI, JSP ...
- bzoj1084【SCOI2005】最大子矩阵
1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1946 Solved: 970 [Submit][id ...
- Qt Installer Framework的学习(二)
Qt Installer Framework的学习(二) Qt Installer Framework的一些操作能够使用最常见的Qt项目来表示,也就是说,书写pro文件,使用qmake执行之,除了能够 ...
- 62.nodejs中的ejs模板学习
转自:https://blog.csdn.net/dongmelon/article/details/72403913 02.ejs.这是被include的文件 <script> cons ...
- Tachyon的配置详解
Tachyon的配置 Tachyon环境变量 Tachyon通用配置 TachyonMaster配置 TachyonWorker配置 用户配置 1 Tachyon的配置 这里以0.5.0版本为例,介绍 ...
- 秀秀SolarWinds为网络工程师准备的工具
SolarWinds Engineer's Toolset部分功能截图 650) this.width=650;" onclick='window.open("http://blo ...