- 博客(17)
- 收藏
- 关注
RSS订阅原创 SVG学习
每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。svg 的transform属性可以用来移动、旋转、缩放SVG中的某个元素,如<svg>中某个元素用了变形,该元素内部会建立, 一个新的坐标系统,该元素默认后续所有变化都是基于新创建的坐标系统。支持格式： “M 0 0, 1 1, 2 2”或 “M0 0, 1 1, 2 2” 或 “M 0 ，0 , 1， 1, 2， 2”或 “M 0 0 1 1 2 2”
2024-11-20 18:21:09
716
原创 GSAP动画库
什么是GSAPGSAP全称是（ GreenSock Animation Platform）GreenSock 动画平台。GSAP 是一个强大的 JavaScript 动画库，可让开发人员轻松的制作各种复杂的动画。GSAP动画库的特点与Snap.svg不一样，GSAP无论是HTML 元素、还是SVG、或是Vue、React组件的动画，都可以满足你的需求。GSAP的还提供了一些插件，可以用最少的代码创建令人震惊的动画，比如：ScrollTrigger插件和MorphSVG插件。
2024-11-20 18:02:56
1671
原创 Snap.svg使用教程
提供了简单直观的与动画相关的JavaScript API，Snap 可以帮助你的 SVG 内容更具交互性和吸引力。Snap.svg 库处理 SVG 就像 jQuery 处理 DOM 一样简单，并且 Snap 是 100% 免费和 100% 开源的。来创建一个新的 SVG 容器，或者选择现有的 SVG 元素，并为其添加各种形状、图形、动画等。用于创建和初始化 Snap.svg 的实例，进而操作和管理 SVG 元素。Snap 可用于创建动画，操作现有的 SVG 内容，以及生成 SVG 内容。
2024-11-19 23:10:54
778
原创 absolute定位细节
1、left: 0;当子盒子的宽度为200%是。可以实现元素放置在其包含块的顶部，超出包含块的可视区域。默认子盒子会跟父盒子左对齐，想让子盒子与父盒子右对齐，可以只需要right：0;使用场景：当水球体的水量达到100%时，将波浪挤出盒子外不可见区域。
2024-11-18 16:23:41
154
原创 Canvas2D实现刮刮乐
剩下就是通过原生JS，监听鼠标事件，将画笔实时移动到鼠标的坐标位置，不停的绘制。（2）要在图形的onload函数里执行绘画操作。（1）画布的大小与图像的大小相同。
2024-11-10 18:35:35
257
原创 CSS3笔记总结
rotate3d：前3个参数分别表示坐标轴:x,y,z,第4个参数表示旋转的角度,参数不允许省略。例如:transform: rotate3d(1,1,1,30deg),意思是:x、y、z分别旋转30度。注意:rotateZ(20deg)相当于 rotate(20deg),当然到了3D变换的时候,还能写:rotate(x,x,x) 旋转会改变X Y 轴的方向。rotateX：设置x轴旋转角度,需指定一个角度值(deg),面对x轴正方向:正值顺时针(往屏幕里方向),负值逆时针(往屏幕外方向)。
2024-11-08 17:59:40
938
原创 Canvas学习笔记
Canvas最初由Apple于2004年引入,用于Mac OS X WebKit组件,同时给Safari浏览器等应用程序提供支持。后来,它被 Gecko内核的浏览器(尤其是Mozilla Firefox),Opera和Chrome实现,并被W3C提议为下一代的标准元素(HTML5新增 元素)。Canvas提供了非常多的JavaScript绘图API(比如:绘制路径、矩形、圆、文本和图像等方法),集合元素可以绘 制各种2D图形。Canvas API 主要用于绘制2D图形。
2024-11-05 00:04:32
835
原创 git学习笔记
Git是一个开源的分布式版本控制系统，是Linus Torvalds为了管理Linux内核开发而开发的一个开放源码的版本控制软件。它用于跟踪项目代码的变化、管理代码的版本，以及协调多人在同一个代码库上的开发。
2024-11-04 14:09:46
497
原创 vue3自定义展开折叠内容
1、假设盒子里有很多内容，超出了盒子的高度，我们通过给元素增加或删减类名的方式修改他的样式，把他的类名定义动态属性 :class="selClassName" ，
2024-11-03 12:44:23
425
原创 《常用HTML笔记总结》
这是文档类型声明，用于告知浏览器使用HTML5标准来解析页面。<html>：这是根元素，包裹整个HTML文档，通常包括lang属性来指定语言，lang="zh"，表示文档主要使用中文，这样做有助于浏览器和屏幕阅读器正确处理文本。<head>：包含文档的元数据。<title><meta><link><script><body>：包含页面的可视内容，如文本、图片、链接、表单等。
2024-09-30 16:59:22
941
原创 vue自定义指令实现过程
自定义指令可以实现：1、自定义全局组件2、自定义全局指令3、添加全局的属性和方法4、全局依赖注入。1、自定义全局组件，以单文件组件的形式引入。然后在main.js中全局注册插件。
2024-01-21 12:48:41
530
1
原创 当块级元素转换为行内块元素的时候，元素之间默认会有一个空白区域，如何清除？
2、将父元素的字体大小设置为0：font-size: 0;2、将父元素的字体大小设置为0：font-size: 0;1、用结构的注释标签，添加在盒子之间，可以清除中间的空白。3、通过将父元素设置为 display: flex;3、通过将父元素设置为 display: flex;1、用结构的注释标签，添加在盒子之间。
2023-12-08 17:35:52
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人