Html / CSS
文章平均质量分 54
前端小小白zyw
一只路过的小码农。。。
展开
-
JS 事件捕获、事件冒泡、事件委托
JS 事件机制原创 2024-03-11 17:54:18 · 1596 阅读 · 2 评论 -
JS实现chatgpt数据流式回复效果
处理下,然后代码片段着色利用。原创 2024-03-07 10:17:39 · 1633 阅读 · 0 评论 -
JS利用Worker多线程大文件切片上传
在做前端上传时,会遇到上传大文件,大文件就要进行分片上传,我们整理下思路,实现一个分片上传,最终我们要拿到每一个分片的值, 分片索引,以及分片: 我们先创建一个文件,用于处理选择文件,进而分片,这里利用获取文件hash值: 默认一个分片5M,这里要向上取整,计算出分片数量然后循环处理对文件进行切片,利用对文件进行切片处理可以看到,切为若干份然后获取切片的值,最终返回然后对返回的结果进行批处理,这里我们可以打印下处理的时间可以看到,处理了4秒左右,主要是花费在处理文件上,获取文件为同步任务,且原创 2024-03-01 19:40:54 · 2000 阅读 · 3 评论 -
CSS 实现立体字效果
【代码】CSS 实现立体字效果。原创 2024-01-30 16:32:02 · 2397 阅读 · 1 评论 -
Web Animation API
接下来,点击页面,小球会移动到点击的地方。先简单的写一个页面,一个背景,一个小球。工作中经常会遇到需要动画的场景,很比较吃力,也不是不能实现,需要。动画解决方案**,并且。,,但是如果遇到需要。原创 2024-01-15 17:43:48 · 2217 阅读 · 0 评论 -
JS 封装数字滚动插件
先计算一个倍率,结束 - 开始 / 执行时间,利用。原创 2023-12-28 14:26:24 · 566 阅读 · 0 评论 -
JS + CSS 实现高亮关键词(不侵入DOM)
以上就是关于的使用方法:1. 获取文字节点2. 创建选区3. 创建高亮4. 自定义样式**文本颜色 `color`背景颜色 `background-color`文本修饰 `text-decoration`文本阴影 `text-shadow`文本描边 `-webkit-text-stroke`文本填充 `-webkit-text-fill-color`以下是兼容性,比较差,目前谷歌只兼容Chrome 105以上。原创 2023-12-28 14:04:12 · 2137 阅读 · 0 评论 -
flex + margin 妙用
利用flex + margin 巧用原创 2023-12-27 11:38:42 · 1268 阅读 · 0 评论 -
原生JS实现拾色器功能
纯JS实现取色器原创 2023-08-23 17:33:33 · 497 阅读 · 0 评论 -
Animation 动画调试
Animation。原创 2023-06-09 16:21:16 · 526 阅读 · 0 评论 -
CSS 实现不规则元素的阴影
CSS 实现不规则元素的阴影原创 2023-02-17 09:49:53 · 722 阅读 · 0 评论 -
JS 跨标签通信(实时)
跨标签通信原创 2023-02-10 20:29:24 · 911 阅读 · 0 评论 -
JS 实现抛物线动画案例
我们这里简单实现,一个按钮,一个购物车图标,样式这里直接跳过,最终。至此,我们便实现了简单的购物车抛物线动画。接下来,我们一步步实现逻辑。原创 2023-02-10 14:55:45 · 3931 阅读 · 1 评论 -
详解 Intersection Observer API ( 交叉观察器 )
提供了一种方法可以监听目标元素是否展示到视口(viewport)图片懒加载滚动动画…上述的需求,以往一般监听scroll事件,利用方法获取目标元素的位置信息。由于监听scroll事件,不断地触发回流,对性能有一定的影响,不过可以通过函数节流解决,但是方法对性能造成的影响无法有效优化的。!!!所以,浏览器为了解决上述难题,推出了,由于方法是异步的,不影响主线程的执行效率。原创 2022-12-02 20:23:32 · 3819 阅读 · 0 评论 -
vue实现下载excel表格俩种方式
一般类似功能都会放到后端来做,当然作为一项扩展技能,前端开发人员也应该掌握。今天,给大家介绍前端实现excel表格下载的俩种方式方式一、const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]if (!jsonData.length) return// 表格的列标题 如果出现科学技术法或者其他格式 使...原创 2020-04-08 17:13:36 · 3950 阅读 · 2 评论 -
HTML5 WebSocket的入门使用
HTML5 WebSocket:长连接,客户端与服务端可以保持长时间的通信。一、具体步骤:1、创建一个websocket实例,连接远程服务器并且需要一个链接服务器的urllet baseUrl = "ws://echo.websocket.org/"let webSocket = new WebSocket(baseUrl)注意,这里的URL前缀不再是HTTP协议,而是 ‘ws://’...原创 2019-01-08 18:08:13 · 4603 阅读 · 2 评论 -
CSS3实现景深3D视觉效果
效果图:添加效果前:添加效果后:CSS:.box { width: 310px; height: 260px; margin: 20px auto; /* 景深:离视线的距离 */ perspective: 800px; background-color: red; display: flex; justify-content: center; al...原创 2019-08-29 17:39:19 · 4274 阅读 · 0 评论 -
总结一些较偏但实用的CSS样式
业余时间总结一些较偏但是很实用的CSS样式,项目中经常用到,以便下次遇到直接拿来使用:(1):防止页面加载时出现 vuejs 的变量名:v-cloak当页面加载的时候从后台获取到数据进行渲染时,在渲染未完成可能会显示出变量名,这时候我们用v-cloak解决:(2):修改input的placeholder的样式:::-webkit-input-placeholder{} /*...原创 2018-12-06 17:23:08 · 583 阅读 · 2 评论