ipad概念画板手写+svg动画效果
先上图:
概念画板是个好东西,可以直接导出为svg,并且可以通过 airdrop 直接传到电脑
实现代码:
anime({
targets: '.lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 200,
delay: function(el, i) { return i * 200 },
loop: true
});
采用素描特性,每个 path 动画时间 200ms, 下一个元素在当前元素画完后开始。
- svg动画库 https://anime.js.cool
- 在线示例: https://jsfiddle.net/willin/7...
- Gif录屏用的是: LICEcap (mac os 免费软件)
推荐阅读
Next.js 13 appDir 实战 i18n
Not Planned FeaturesWe are currently not planning to include the following features in app:Internationalization (i18n) - we will be providing a guide on how to implement internationalization in app...
willin阅读 380
CSS & SVG 绘制写作网格线的3种方式
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面...
XboxYan赞 7阅读 1.6k
svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...
zxl20070701赞 3阅读 483
CSS、SVG、Canvas对特殊字体的绘制与导出
欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理。...
XboxYan赞 3阅读 946
SVG 安全
一 目录不折腾的前端,和咸鱼有什么区别目录一 目录二 任务目标三 SVG 简要介绍四 SVG 漏洞认知 4.1 跨站脚本(XSS) 4.2 HTML 注入 4.3 XML 实体导致的 Billion Laughs 攻击 4.4 Dos(拒绝...
jsliang阅读 965
VueJs中动态更改svg的相关属性
公司项目中有一个关于图标库管理的需求,大致需要在页面能够动态去更改对应svg图标的大小、颜色等(这里的更改颜色限制线性图标)。在网上查找了相关资料,做了技术的预研及demo的编写,在此记录一下。
前端扫地僧阅读 406
vite3 + vue3如何封装健壮的【SVG插件】?
概念:SVG是一种基于XML的矢量图形格式,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体,用于在Web和其他环境中显示各种图形;它允许我们编写可缩放的二维图形,并可通过CSS或JavaScript进行操作。它由万维网...
代码诗人_阅读 312
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。