- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 CSS小技巧之圆形虚线边框
基于伪元素设置锥形渐变 `repeating-conic-gradient`并配合`-webkit-mask-composite`实现自定义圆形虚线边框的效果。
2023-05-15 09:33:15
192
原创 一个有趣的图片加载效果
一个有趣的图片加载效果，主要使用了 `image-rendering: pixelated` 配合 `background-position` 产生的过渡加载效果。
2023-04-26 18:51:13
14
原创 一个神奇的小工具，让URL地址都变成了“ooooooooo“
一个很有创意的小工具网站，将一个URL地址转换为都是 ooooooooo 的样子，通过转换后的地址访问可以转换回到原始地址，设计很巧妙的实现了这个功能。
2023-04-24 22:20:12
26
原创 回顾2022：Web性能方面有哪些新功能
在过去的一年里，许多新的浏览器功能已经可以用来提高网站的性能。我们也有新的工具来衡量和提高网站的速度，在此也期待2023年Web性能的新的发展。
2023-04-18 18:59:12
12
原创 CSS文本平衡排版 text-wrap:balance
这是一个很不错且实用的功能，应用到的场景也挺多，但是目前还是在实验阶段，真正可以线上环境使用还需要一定的时间，但是可以提前了解一下发展的趋势。
2023-04-18 09:18:35
60
原创 便捷高效，Notion AI比ChatGPT更加香
Notion的AI功能可以帮助你更加高效地管理工作和生活。无论是团队合作还是个人使用，都能帮助你专注于任务本身，提升工作效率。如果你还没体验过Notion的话，快来试试看吧~
2023-04-13 17:19:13
66
原创 私有化部署chatGPT，告别网络困扰
私有化部署chatGPT，从此告别网络困扰，一个基于GPT-3.5 Turbo的开源项目，界面简洁大气，反应速度快，快来试试看吧~
2023-03-30 17:46:35
4048
原创 避免使用CSS @import 影响页面加载速度
加载CSS文件最常见的方法是使用link标签：但是这样浏览器在加载初始CSS文件后会启动另一个样式表得请求。在现代脚手架搭建的项目中，在开发代码中使用的@import最终编译是会合并在一起的，不会存在这种问题，如果在编译过程中没有做特殊处理的情况则需要关注一下这块的影响。专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
2023-03-30 09:35:52
27
原创 VisBug：助力前端开发的浏览器插件
VisBug支持诸如文本编辑、颜色调整、元素选择、边距和填充等常见的网页设计和开发任务。通过这个插件，开发人员可以更快速地创建和修改网页，提高工作效率。
2023-03-27 19:35:29
77
原创 如此丝滑的按钮交互效果
如何实现一个有特色的按钮交互效果，按钮的背景色可以随着鼠标的移动变化且背景区域会随着鼠标的移动产生弹性变化效果，按钮的文字阴影会随着鼠标的变化而变化，快看看看吧~
2023-03-21 09:31:15
28
原创 从零打造你的前端开发脚手架
在实际开发过程中，我们经常都会用到脚手架来构建前端工程项目，使用脚手架可以大幅提升项目的构建速度，通过命令行的交互，选择你所需要的配置与集成，可快速完成初始项目的创建。
2023-03-13 09:32:46
39
原创 快来解锁小程序蓝牙开发技能
微信小程序中很早就支持了蓝牙能力，本本缘于一个外包蓝牙项目解锁前端调试蓝牙开发的技能，顺道记录一下开发的过程及遇到的问题
2023-02-26 23:15:10
62
原创 一个炫酷的头像悬停效果
你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，只用了一个img元素和不到20行的CSS技巧实现一个炫酷的头像悬停效果
2023-02-06 09:55:19
68
原创 那些炫酷的CSS文字效果之诗词《兔》
不知不觉已经迈入2023年了，本次分享10种不同的有关文字方面的特效，让我们一边欣赏有关《兔》相关的古诗词的同时一边走进CSS的世界。
2023-01-09 10:00:21
204
原创 那些你不知道的 CSS 自定义形状网格布局 3
在整个系列中，我们探索了许多不同类型的图像网格，从基本的东西到我们今天制作的复杂马多图镶嵌。这里面的大量的CSS裁剪实践经验希望在你的项目中可以用到这些经验
2022-12-12 09:31:23
43
原创 基于一段神奇的CSS渐变制作噪点效果
噪点效果本质用canvas SVG等都是可以实现，本文基于一段神奇的CSS渐变制作噪音效果，结合混合模式及滤镜效果还能实现更多的艺术效果，快来看看吧
2022-11-28 08:15:00
91
原创 基于CSS mask和clip-path实现切角的技巧
本文将使用CSS mask和clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。
2022-11-11 09:40:47
459
原创 那些你不知道的炫酷按钮交互效果
一个好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画，今天分享给大家。
2022-09-21 08:15:00
309
原创 头大了，Mysql写入数据十几秒后被自动删除了
最近遇上了一件困扰了我好几天的一个问题，为此排查了一整天都无功而返，想到这感觉真对不起老板，一天一行代码没写，啥也没做成。
2022-09-15 09:30:13
104
原创 近期对前端性能优化的总结
前端性能优化不管是在面试中还是在实际开发过程中，都是每一个前端开发工程师都必不可少的能力。本文总结本人多年开发经验中对前端性能优化的理解，希望对大家有所帮助。
2022-09-13 08:03:57
82
原创 基于threejs中秋佳节之际带你遨游星空
海上生明月，天涯共此时。又是一年中秋时，回想上一次赏月已是那遥远的童年时光，忙碌使我们忘却了假日应有的舒缓。今天在这假期即将开始的时候，让我们用代码来过个节
2022-09-09 18:13:35
161
原创 一次纯线上接口异常的排查过程
你是否有遇到过线上接口发生异常，在测试环境及本地环境均正常无法复现的情况，本文记录一次排查线上环境接口异常的过程，或许能给你带来一定的思路。
2022-08-25 16:49:52
134
翻译 那些你不知道的 CSS 自定义形状网格布局
关于那些你不知道的CSS自定义网格布局，基于 clip-path和mask完成六边形蜂窝，菱形，三角形，拼图等风格布局，快来看看吧
2022-08-19 09:50:50
108
原创 基于CSS mask-image 实现炫酷图片过渡效果之星球大战
基于 CSS mask-image 实现了四种图片过渡效果，相信这几种效果能够让你眼前一亮，让你的项目炫酷起来吧
2022-07-17 13:12:36
384
原创 作为前端开发者如何迈向独立开发者
作为前端开发的你是否有计划往独立开发者发展呢，本文从如何找到灵感到新产品上线运营以个人的实战角度相对粗略的说明了每一个步骤如何行动起来。
2022-07-16 10:59:44
346
原创 纯CSS实现四种方式文本反差色效果
文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。...
2022-07-12 12:52:56
905
原创 使用CSS background实现炫酷悬停效果
日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。本文将使用背景色实现类似的效果
2022-07-05 09:41:19
257
原创 CSS 中 ::before 和 ::after 伪元素的几个实际用途
基于 CSS 中 ::before 和 ::after 伪元素的几个实际场景的运用，文末还有苹果充电线的实现。
2022-05-29 19:01:57
3915
1
原创 让你事半功倍的JS utils工具函数
今日分享一篇积累和收集了很久的JS utils工具函数，文章代码量较多，建议收藏起来慢慢看，当哪一天需要用到的时候，打开你尘封已久的收藏夹，相信能让你的业务代码开发事半功倍。汇集了时间相关，DOM相关，URL相关，判断相关，图片相关，缓存相关等。部分逻辑处理较为简单，如果是业务量较为复杂的情况建议要斟酌使用，但对于大部分的项目应该是绰绰有余。接下来就进入代码部分吧～时间相关时间戳转自定义格式时间export const dateRegExp = (time, strText) => { c
2022-05-25 21:21:43
594
原创 夏天来啦，用纯CSS实现水果解解馋吧
今日是二十四节气的小满，是夏季的第二个节气。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~前言以上15种水果你能看出都是什么水果吗？相对不够那么逼真，但是相信你也能猜出大概的名称。接下来将分别展开代码说明各自的实现过程，在不看下文的代码前可以先思考一下看到以上图片你会用什么方式去实现呢？为保障文章的精华部分，部分非主要代码就不完整的贴出来了，如有不理解的地方可留言交流~代码实现苹果#1只需要一个标
2022-05-22 09:30:00
131
原创 CSS 炫酷文本过渡动画
今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看吧～代码实现文字不断的在切换，确定的是有一个包含纯文字的数组，在此我们定义如下的html代码，后面通过交替显示其中一个span标签来达到动画的效果。<divid="container"><spanid="text1"></span>...
2022-05-18 20:25:46
743
原创 常用 CSS 代码片段集合，看看有你熟悉的代码吗
分享日常开发过程中遇到的常见CSS代码，来看看有没有你熟悉的代码，相信这么多的场景能为你节省一些些时间，建议收藏起来，说不定哪天就用上啦～overscroll-behavior-x内部盒子滚动到边界的时候，将触发整个页面滚动，可通过设置overscroll-behavior-x阻止此行为div{height:300px;width:500px;overflow:auto;overscroll-behavior-x:contain;}使用 sroll-s...
2022-05-16 18:34:25
137
原创 CSS神奇的卡片悬停交互效果
一个堪称完美用户体验度的产品，离不开交互设计师所做出的巨大贡献，交互设计师的日常离不开特有的思维习惯和经久沉淀下来的设计方法。这些看似简单不起眼的规则，极有可能是一个产品未来能否在巨大的市场中脱颖而出的因素。今天逛网站看到一个不错的交互设计，文本将展开说明CSS代码实现过程，最终效果如下图GIF所示，为减小GIF的大小，去掉了卡片中的内容。这种卡片在各大官网中出现的比较多，介绍产品的种类，系统的功能，价格的等级等等。但是很多都是纯卡片展示，没有任何给到用户的交互反馈，但像上图所示在用户鼠标移.
2022-05-15 16:14:30
750
1
原创 CSS 文本阴影 text-shadow 悬停效果
本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上并不会为这些文本制作任何文本阴影效果。text-shadow 没有文字阴影？通过以下的gif图中的鼠标悬停效果，相信你能理解使用 text-shadow 却为什么没有阴影。看到此图你的第一感觉是不是复制了一份文本，比如创建伪元素，设置 content: 'text'，然后为其设置单独的动画。但是本文完全使用text-shadow 实现，接下来将为大家展开说明四种悬停动画的实现方式。text-shad
2022-05-14 16:46:13
554
原创 CSS重复线性渐变之画格子
正式开始文章前，先看图，看到以下图片你会想到什么呢？是不是程序员的标配来了，格子衫。没错，今天的内容就是用CSS画格子。前言看到上面各种各样的格子，你会用什么方式实现呢？由于格子的大小间隙及方向多变，不能每次都创建很多的元素实现，那么就没有发挥到CSS的强大实力了，以上每个格子风格都只需要一个元素承载，剩下的交给CSS吧。仔细看格子虽然有不同的形式，但是是有规律的重复的，比如第一个格子我们可以拆解为以下两块组成。这样看是不是就清晰多了，我们只需要写入多个条纹覆盖在一起即可。 怎么
2022-05-09 09:46:16
348
原创 CSS动画篇之炫酷时钟之时钟墙
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。前言看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。实现过程HTML当你仔细看这个动图的时候可以看出我们可以
2022-05-07 23:17:34
365
原创 Vue 灰度发布新功能的那些事
「前言」什么是灰度发布？百度百科的解释如下。灰度发布是指在黑与白之间，能够平滑过渡的一种发布方式。AB test就是一种灰度发布方式，让一部分用户继续用A，一部分用户开始用B，如果用户对B没有什么反对意见，那么逐步扩大范围，把所有用户都迁移到B上面来。灰度发布可以保证整体系统的稳定，在初始灰度的时候就可以发现、调整问题，以保证其影响度。从上可以看出，灰度发布的主要作用有以下几点： 降低直接全量发布带来的影响，让少部分用户先使用新版本，如发现问题则及时做好修复，验证无重大问题则全量发布新功能
2022-05-07 12:34:05
202
原创 前端异常监控平台对比
前言前端监控包括很多种，用户行为监控，异常监控，性能监控等。一个完善的前端项目是肯定需要这些监控平台的，以便于在关键时刻给出我们未来方向的决策。本文重点讨论前端异常监控中的各大平台的差异对比。概述整理了目前市面上的几个前端异常监控平台： sentry fundebug frontjs webfunny sentry地址：GitHub - getsentry/sentry: Sentry is cross-platform application mon
2022-05-07 12:29:16
1464
2
特效多卡片跟随鼠标方向3D转动
2022-05-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人