现代 CSS 解决方案:accent-color 强调色

2 月 27 日
阅读 4 分钟
641
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。

【动画进阶】神奇的 3D 卡片反光闪烁动效

1 月 22 日
阅读 9 分钟
1.8k
最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下:非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果:该效果的几个核心点:卡片的 3D 旋转跟随鼠标移动效果如何让卡片在 Hover 状态,有不同的光泽变化如...
封面图

现代 CSS 解决方案:文字颜色自动适配背景色!

1 月 8 日
阅读 5 分钟
2.9k
在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。其功能能够涵盖:精简调暗饱和度降低饱和度色度增强调整不透明度反转补充...
封面图

带圆角的虚线边框?CSS 不在话下

2023-12-13
阅读 5 分钟
1k
今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样:这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: {代码...} 但是,原生的 dashed 有一个问题,就是我们无法控制虚线的单段长度与间隙。假设,我们要这么一个效果呢虚线效果呢:此时,由于无法控制 border: 2px dash...
封面图

【布局技巧】Flex 布局下居中溢出滚动截断问题

2023-12-07
阅读 5 分钟
1.9k
在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: {代码...} {代码...} 效果如下:这里,外层的容器是定宽的,内层的 flex-item 也是定宽的。当 flex-item 个数较小时,是没有问题的。但是,如果当元素内容过多,并且设置了 flex-wrap: nowrap 的话,内容就会溢出容器...

浏览器跨 Tab 窗口通信原理及应用实践

2023-11-28
阅读 11 分钟
1.8k
最近,相信大家一定被这么个动效给刷屏了:以至于,基于这个效果的二次创作层出不穷,眼花缭乱。基于跨窗口通信的弹弹球:基于跨窗口通信的 Flippy Bird:我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动,效果如下:代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - broadcastAnimation当然,本文的核心不是去...
封面图

CSS 也能实现 if 判断?实现动态高度下的不同样式展现

2023-11-14
阅读 5 分钟
880
今天在群里,有个小伙伴问了这么一道很有趣的问题:CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容为了简化实际效果,我们看这么一张示意效果图:可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。这个效果在很多场景都会出现,可以算是一个高频场景...
封面图

前端如何防止数据被异常篡改并且复原数据

2023-11-08
阅读 8 分钟
872
每天,我们都在和各种文档打交道,PRD、技术方案、个人笔记等等等。其实文档排版有很多学问,就像我,对排版有强迫症,见不得英文与中文之间不加空格。所以,最近在做这么一个谷歌扩展插件 chrome-extension-text-formatting,通过谷歌扩展,快速将选中文本,格式化为符合 中文文案排版指北 的文本。emmm,什么是排版指...
封面图

单标签下多色块随机文字随机颜色动画

2023-10-31
阅读 11 分钟
1k
在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中,我们利用纯 CSS,实现了一个非常 Amazing 的动画效果:其中一个核心点就是,我们利用了如下的代码,在一个 DIV 平面内,实现了单个平面下的随机文字随机颜色效果。效果如下:其中的 HTML 代码大致如下: {代码...} 这里为了实现上述效果,其实是用了 32 列,每列是一个 ...
封面图

CSS 还原拉斯维加斯球数字动画

2023-10-18
阅读 11 分钟
899
最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」:场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震:我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有 CSS 不能实现的?本文,就将尝试使用 CSS,大致还原这个效果。拆解动画效果其实,上述的动画效果,本质就是一个 3D 立方体。同时,3D 立方体...
封面图

小技巧 | 渐变消失遮罩的多种实现方式

2023-10-17
阅读 3 分钟
623
在知乎看到一题比较有意思的题目。题目大致是如何实现下述图片的效果,如果使用 div 前置遮挡的话,会影响 div 后面的按钮,使其无法被点击。本文将简单介绍几种这个效果的实现方案。渐变配合 pointer-event第一种方式,比较容易想到。使用渐变配合 pointer-event 实现。简单模拟一下场景,假设我们有如下一个 ul 列表,...

【动画进阶】神奇的背景,生化危机4日食 Loading 动画还原

2023-10-10
阅读 8 分钟
770
最近,在 Steam 玩一款老游戏(生化危机 4 重置版),其中,每当游戏转场的过程中,都有这么一个有趣的 Loading 动画:整个效果有点类似于日食效果,中间一圈黑色,向外散发着太阳般的光芒。本文,我们将尝试使用 CSS,还原这个效果。整个效果做出来,类似于如下两个动画效果这样:实现主体效果其实,整个效果,去掉中间...
封面图

【动画进阶】当路径动画遇到滚动驱动!

2023-09-14
阅读 9 分钟
1.6k
本文,我们将一起利用纯 CSS,实现如下这么个酷炫的效果:在一年前,我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline:革命性创新,动画杀手锏 @scroll-timeline。利用这个新特性,我们可以轻松的将原本基于时间控制的动画效果,交给页面的滚动特性进行控制,像是这样:只是,该特性由于诸多原因,遭到了...
封面图

现代 CSS 解决方案:原生嵌套(Nesting)

2023-09-11
阅读 3 分钟
2.8k
很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范!

现代 CSS 解决方案:数学函数 Round

2023-09-04
阅读 7 分钟
3.2k
在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如在现代 CSS 解决方案:CSS 数学函数一文中,我们详细介绍了calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。min() 和 max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同...

纳尼!CSS 也能实现碰撞检测?

2023-08-22
阅读 7 分钟
4.5k
本文,我们将一起学习,使用纯 CSS,实现如下所示的动画效果:上面的动画效果,非常有意思,核心有两点:小球随机做 X、Y 方向的直线运动,并且能够实现碰撞到边界的时候,实现反弹效果小球在碰撞边界的瞬间,颜色发生随机的变化嗯?很有意思的效果。看上去,我们好像使用 CSS 实现了碰撞检测。然而,实际情况真的是这样...
封面图

抢先体验!超强的 Anchor Positioning 锚点定位

2023-08-15
阅读 9 分钟
4k
Anchor Position 的出现,极大的丰富了 CSS 的能力,虽然语法稍显复杂,但是有了它,能够实现非常多之前实现起来非常困难,或者压根无法使用纯 CSS 实现的功能。
封面图

【动画进阶】神奇的 3D 磨砂玻璃透视效果

2023-08-08
阅读 10 分钟
3.9k
最近,群友分享了一个很有意思的效果:原效果的网址:frosted-glass。该效果的几个核心点:毛玻璃磨砂效果卡片的 3D 旋转跟随效果整体透明度和磨砂感、以及卡片的 3D 形态会随着用户移动鼠标而进行动态变化原效果实现的较为复杂,并且实际体验卡顿感较强。本文,我们就将尝试一步一步用更为简单的方式还原复现这个效果。...
封面图

【动画进阶】有意思的 Emoji 3D 表情切换效果

2023-08-01
阅读 14 分钟
4.9k
最近,群里面的同学发了这么一个非常有意思是动画效果:原效果地址 -- CodePen Demo -- Letter Hop当然,原效果,主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库: {代码...} 但是,这个效果,其实本身并不复杂。本文,我们将不借助任何动画库,尝试用最简单的 CSS 和 JavaScript 代码还原一个类似的 Emoji 3D ...
封面图

【动画进阶】有意思的网格下落渐次加载效果

2023-07-18
阅读 4 分钟
2.9k
最近,群友贴了一个非常有意思的动画效果,整体动画效果如下:点击某个按钮后,触发一个动画效果,原本的网格内容,将按顺序(又带点随机的效果)从高处下落进行加载填充动画。当然,我个人认为这个动画有点华而不实,主要体现在这个动画一次需要耗费较长时间,有点消磨人的耐心。不过确实一个很好的 CSS 动画教学案例。...
封面图

单标签下的日间/黑夜模式切换按钮效果

2023-06-21
阅读 11 分钟
6.3k
前不久,在网上看到这么一张非常有趣的图:想必很多同学都看到这张图,是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。其最终效果大致如下:原完整代码在这里:Night && Day Toggle ☀️/🌙 [Completed It!]原效果用了大量 HTML 标签,大量 SVG 元素以及 350 行的 CSS 完成的上述效果。而本文,我们将尝试优化...
封面图

现代 CSS 解决方案:CSS 原生支持的三角函数

2023-05-25
阅读 6 分钟
4k
在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如 :calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。min() 和 max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同使用。clamp():用于将属性值限制在一个范围内,支持三...
封面图

超长溢出头部省略打点,坑这么大,技巧这么多?

2023-04-27
阅读 7 分钟
4.7k
在业务中,有这么一种场景,表格下的某一列 ID 值,文本超长了,正常而言会是这样:通常,这种情况都需要超长省略溢出打点,那么,就会变成这样:但是,这种展示有个缺点,3 个 ID 看上去就完全一致了,因此,PM 希望能够实现头部省略打点,尾部完全展示,那么,最终希望的效果就会是这样的:OK,很有意思的一个需求,最...

涨姿势了,殊途同归的图片交互动效制作!

2023-04-24
阅读 7 分钟
4.4k
最近,在 CodePen 上,看到一个非常有意思的图片动效,效果如下:原效果链接:CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations本身这个动画效果,并没有多惊艳。惊艳的地方在于原作者的实现方式非常有趣,我们简单来看看: {代码...} {代码...} 怎么样,实际代码行数不错,大部分是注释。...

涨姿势了,有意思的气泡 Loading 效果

2023-04-13
阅读 8 分钟
6.2k
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的:使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电动画圆弧的实现首先,我们可能需要实...

现代图片性能优化及体验优化指南

2023-03-31
阅读 23 分钟
4.6k
对图片的性能优化及体验优化在今天就显得尤为重要。本文,就将从各个方面阐述,在各种新特性满头飞的今天,我们可以如何尽可能的对我们的图片资源,进行性能优化及体验优化。

英雄联盟比赛选手的六芒星能力图动画是如何制作的?

2023-03-24
阅读 6 分钟
4.4k
最近,在看 LPL 比赛的时候,看到这样一个有意思的六芒星能力图动画:今天,我们就来使用纯 CSS 实现这样一个动画效果!实现背景网格对于如下这样一个背景网格,最好的方式当然肯定是切图。如果一定要使用 CSS,勉强也能做,这就涉及了不规则图形边框效果,我们有一些方式可以实现,可以参考一下这几篇文章:现代 CSS 高...
封面图

CSS 高阶小技巧 - 角向渐变的妙用!

2023-03-21
阅读 5 分钟
3.8k
本文将介绍一个角向渐变的一个非常有意思的小技巧!我们尝试使用 CSS 绘制如下图形:在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局:那么,本文有什么特殊之处呢?让我们一探究竟。快速实现网格布局首先,上述的布局还是希望使用一个标签完成,这个没...

现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理

2023-03-10
阅读 4 分钟
5.7k
本文是系列第五篇,终章。系列文章:现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用现代图片性能优化及体验优化指南 - 响应式图片方案现代图片性能优化及体验优化指南 - # 缩放精细化展示及避免布局偏移、拉伸现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案图片资源,在我们的业务中可谓...
封面图

巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画

2023-03-07
阅读 7 分钟
5.8k
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。
封面图