自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(14)
  • 收藏
  • 关注

原创 作为前端开发,感受下 nginx 带来的魅力!

虽然前端人员可能不经常直接操作 Nginx,但了解其基本概念和简单的配置操作是必要的。这样,在需要自行配置 Nginx 的情况下,前端人员能够知晓如何进行基本的设置和调整。

2024-05-14 14:30:37 870 1

原创 渐变边框文字效果?CSS 轻松拿捏!

简单总结一下,综上所述,其实 -webkit-text-stroke 是最简单最便捷的实现渐变文字边框的方式。当然,SVG 方法也有其优势,如果需要多重边框效果,甚至是多重渐变文字边框效果,此时,SVG 会更为强大。

2024-04-30 11:09:00 792

原创 客户又要一次性滚动千万条数据...

像是什么之类的我之前都做过了,也发过文章讲解这次又需要做一个什么意思呢?也就是仅仅加载看得见的数据,看不见的则不生成DOM当然,上面那句话只是最理想的状态,以目前浏览器提供的API来说无缝滚动的动态加载都是障眼法,总会有一些多余的资源。

2024-04-24 11:55:17 1026

原创 H5 下拉刷新如何实现

本文讲解了下拉的原理、并根据原理写出初始代码。在初始代码的基础上,我解决了 6 个缺陷、做了 2 个优化,实现了一个完善的下拉刷新效果。链接:https://juejin.cn/post/7340836136208859174。

2024-04-23 11:30:14 1145

原创 【前端缓存】localStorage是同步还是异步的?为什么?

如果文中有任何不准确之处,也欢迎您指正,共同进步。

2024-04-23 11:02:54 2032

原创 聊聊 CSS 的 ::marker

虽然 ::marker 的出现允许我们为列表标记定制样式,但它也有一定的限制性,至少到目前为止是这样。比如,我们在 ::marker 伪元素上可控样式还是有限,要实现下面这样的个性化效果是不可能的:庆幸的是,CSS 中除了 ::marker 伪元素之外,还可以使用 ::before 或 ::after 来生成内容,然后通过 CSS 来实现更具个性化的列表标记样式。

2024-04-17 16:15:40 1084

原创 【前端工程化指南】Git常见操作之标签相关操作

在Git中,。。和。标签的创建和使用可以帮助您在版本历史中标记重要节点,例如软件发布、里程碑完成等。它们提供了一个易于引用的指针,可以方便地访问特定的提交,下面我们具体学习标签相关的命令吧!

2024-04-16 17:42:14 1162

原创 理解浏览器的异步秘密:事件循环、宏任务和微任务

本文介绍了浏览器的事件循环机制以及宏任务和微任务的区别。总的来说,宏任务和微任务是前端开发中处理异步操作的基础,浏览器的事件循环机制通过宏任务和微任务,实现了同步和异步操作的统一调度。了解宏任务和微任务的执行顺序,可以帮助我们更好地理解和使用异步编程模式,并且更好地理解和预测你的代码行为。通过合理地使用宏任务和微任务,我们可以优化代码的性能和响应速度,提高应用程序的稳定性和可维护性。

2024-04-15 18:43:14 796

原创 56.5Kstar的开源项目gpt4free到底是什么来头?

如果你是window电脑那么你也可以安装window的exe文件试试。这个项目通过一种巧妙的方式工作:它伪装成了chatgpt的官方聊天客户端,或者是其他一些已经向OpenAI付费的网站,比如poe、bing等,然后调用这些网站的接口来间接调用OpenAI的服务。不得不说这个开源真的付出了很多,不仅仅有GPT-4的免费接口,还包括了Claude3 等等其他大厂的API厂商,真的太棒了有兴趣的可以研究一下如何调用API呢?通过http://localhost:1337/v1。

2024-04-11 10:31:13 900

原创 手撸一个对话框的心得

相比于我之前封装的组件,我觉得对话框属于略有特殊的组件吧。得挂载body下防止样式层级受影响需要支持API方式调用初始不渲染支持vNode传参原文链接:https://juejin.cn/post/7355845238907650111。

2024-04-10 19:10:40 785

原创 threejs——开发一款塔防游戏

gif 图较大,耐心等待,源码见文末为了上班摸鱼合理的玩游戏,我写了一个3d塔防游戏,其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。

2024-04-10 11:26:37 1157

原创 CSS实现一个故障时钟效果

"glitch" 效果是一种模拟数字图像或视频信号中出现的失真、干扰或故障的视觉效果。它通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形。这种效果常常被用来传达技术故障、数字崩溃、未来主义、复古风格等主题,也经常在艺术作品、音乐视频、电影、广告和网页设计中使用。Glitch 效果通常通过调整图像、视频或音频的编码、解码或播放过程中的参数来实现。来自ChatGPT可以看到关键的表现为一部分或整体闪烁、抖动、扭曲、重叠或变形,所以我们应该重点关注用CSS实现整体闪烁、抖动、扭曲、重叠或变形。

2024-04-09 10:47:10 734

原创 手写一个 OnBoarding 组件

今天我们实现了 OnBoarding 组件,就是 antd5 里加的 Tour 组件。antd 里是用 4 个 rect 元素实现的,我们是用一个 div 设置 width、height、四个方向不同的 border-width 实现的。通过设置 transition,然后改变 width、height、border-width 就可以实现 mask 移动的动画。然后我们在外层封装了一层,加上了上一步下一步的切换。并且用 ResizeObserver 在窗口改变的时候重新计算 mask 样式。

2024-04-08 11:33:10 655

原创 vue3的宏到底是什么东西?

现在我们能够回答前面提的三个问题了。vue中的宏到底是什么?vue3的宏是一种特殊的代码,在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码,根据宏的功能不同,转换后的代码也不同。为什么这些宏不需要手动从vue中import?因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码,在运行时已经不存在这些宏相关的代码,自然不需要从vue中import。为什么只能在setup顶层中使用这些宏?因为在编译时只会去处理setup顶层的宏,其他地方的宏会原封不动的输出回来。

2024-04-07 18:46:03 996 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除