svg 线条动画浅尝
看了别人网站的svg动画觉得非常舒服,自己尝试实现一下
效果如下:
实现需要明白2个关于svg的css属性
1. stroke-dasharray
stroke-dasharray: <percentage> | <length> | inherit
数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如stroke-dasharray:30 20;
,效果如下:
注:可视区域模拟svg的大小方便接下来理解动画
stroke-dasharray:50;
如果为一个值那么短划线和缺口一样长
2. stroke-dashoffset
stroke-dashoffset: <percentage> | <length> | inherit
指定了dash模式到路径开始的距离,也就是偏移量
如果不写stroke-dasharray
属性,stroke-dashoffset
属性就算写出花也看不到效果的。
stroke-dasharray:50;stroke-dashoffset:25px
效果如下
这条线向左移动了25px
再试一下
stroke-dasharray:200; stroke-dashoffset:0px
然后动画让stroke-dashoffset
的值由0变为200动画就出来了
具体效果点击这里
3.demo地址
最后附上开篇放大镜的地址
放大镜
总结
动画其实是由stroke-dashoffset
的值变化实现的,每个线条动画其实是无限个缺口其中的一个,只不过其他的都在svg外面被隐藏起来了。获得每条path或者其他线条的长度(可以找设计要(捂脸)),把stroke-dasharray
和stroke-dashoffset
的值都设置为线条长度,这时候线条会消失,再用动画把stroke-dashoffset
设置为0就ok了。
本篇如能对您有所帮助,实在是感到荣幸。如有不合理之处也请大家多多指点
svg 线条动画浅尝相关推荐
- svg 动画_根据AI导出的SVG path制作SVG线条动画
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐. 前面文章SVG 线条动画基础入门知识学习到了基础知识,现在来给 ...
- svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画
之前用D3制作图表是初次接触SVG,当时只顾感叹D3的强大了.后来当看到网站 Serio Verify 的时候,才意识到SVG用于制作可交互的页面动画是多么有意思. 于是自己也尝试在HTML页面中制作 ...
- android svg 线条动画教程,简单的SVG线条动画
[TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...
- android svg 线条动画教程,SVG之旅:SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
- SVG技术入门:线条动画实现原理
相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己.非常的酷.Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的.Brian Suda也在2 ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- css3宽度变大动画_SVG线条动画
什么是线条动画 通常来说,对于web前端来实现动画效果,不外乎通过下面几种方案: CSS动画:利用css3的样式效果可以将dom元素做出动画的效果来. Canvas动画:利用Canvas提供的API, ...
- html5波浪线条,HTML5 svg炫酷波浪线条动画插件
这是一款HTML5 svg炫酷波浪线条动画插件.该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效. 使用方法 在页面中引入jquery和T ...
- CSS3 SVG波浪线条动画js特效
下载地址 CSS3 SVG波浪线条动画特效是一款简单的线条波浪滚动,线条弯曲动画特效. dd:
最新文章
- 黑白球JAVA_桶中取黑白球 - jiacut的个人页面 - OSCHINA - 中文开源技术交流社区
- 大神整理的python资源大全
- SharePoint 2013 中如何使用Silverlight
- 构建可靠的前端异常监控服务-采集篇
- python os模块下载_Python OS模块目录文件处理
- SpringCloud 应用在 Kubernetes 上的最佳实践 — 线上发布(可灰度)
- vbs修改office设置_E002 Ruby 写入数据 【 =gt; Office 】
- 计算机组成原理的基础知识,计算机组成原理:基础知识部分习题解答(学习笔记)...
- 06_pandas入门教程,引包,使用DataFrame和Series做一些事情
- 3 数组中的重复数字
- hiveserver2的高可用HA
- 为什么站点使用https加密之后还能看到相关数据
- C/C++ map函数统计每个字母出现的次数
- SPSS应用于均值检验
- 台达变频器485通讯接线图_三菱PLC 与台达VFD-L 变频器通讯(RS485)程序
- Arcgis10.8中将三维的高程点转换为二维的高程点
- android开发中绕过检测,[原创] 某加固软件的一些检测点以及绕过方法,欢迎补充...
- 20135203齐岳 信息安全系统设计基础期末总结
- 目标跟踪经典算法汇总(持续更新...)
- OSChina 周六乱弹 ——通常他们这么修复的bug,我都接受不了
热门文章
- matlab连续卷积动画实现(gui编程)
- MYSQL在centos上主从配置
- TCP、UDP、HTTP、SOCKET之间的区别
- Codeforces Round #149 (Div. 2)【AK】
- 文件系统模拟程序python_如何使用sh实现Python虚拟文件系统
- python3 爬虫 requests安装_BOSS直聘招聘信息获取之爬虫工具分析
- Linux启动shell的快捷方式,Linux下为可执行shell脚本文件(.sh),制作桌面启动快捷方式...
- 数据库系统的三级模式结构知识笔记
- 计算机硬件:固态硬盘选购的技巧
- python csv使用_python CSV模块的使用