【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究

8 月 14 日
阅读 6 分钟
1.2k
本文,我们将一起探讨探讨,如下所示的一个卡片 Hover 动画,应该如何实现:这个效果的几个难点:鼠标移动的过程中,展示当前卡片边缘的 border 以及发光效果;效果只出现在鼠标附近?这一块的实现方法就有很多种了,可以计算鼠标附近的范围,在范围内去实现的效果,但是这样成本太高了。转换一下思维,其实也可以利用遮...

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

7 月 20 日
阅读 6 分钟
758
今天,有个群友问了我这么一个问题,如果不想切图,是否有办法实现带渐变边框的字体效果?如下所示:本文,就将尝试一下,在 CSS 中,我们可以如何尽可能的实现这种渐变边框字体效果。元素叠加首先,比较容易想到的写法是通过元素叠加实现。元素本身实现文字效果本身通过元素的伪元素,配合 background-clip: text 实现...
封面图

【动画进阶】类 ChatGpt 多行文本打字效果

7 月 1 日
阅读 5 分钟
681
今天我们来学习一个有意思的多行文本输入打字效果,像是这样:这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。也就是如何在文本不断变长,在不确定行数的情况下,让文字的最末行右侧处,一直有一个不断闪烁的光标效果:单行文本打字效果在此之前...

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

6 月 12 日
阅读 4 分钟
1.3k
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。

【动画进阶】极具创意的鼠标交互动画

5 月 11 日
阅读 9 分钟
2.6k
最近,群里在讨论这么一个有趣的交互效果,来源于:vueflow.dev:通过审查元素,发现原效果借助了 Canvas 实现。思索了一番,觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。于是动手尝试了一番,最终完美的复刻了该效果:过程中还是有非常多有意思的技巧存在的,因此,本文将带大家一起,从 0 到 1...

【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画

5 月 6 日
阅读 8 分钟
5.3k
本文,我们将一起探索,看看在不使用 JavaScript/Canvas 的基础上,使用纯 CSS/SVG 的方式,我们可以如何大致的还原上述的线条动画效果。

【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果

4 月 18 日
阅读 8 分钟
648
最近,群里聊到了一个很有意思的布局效果。大致效果如下所示,希望使用 CSS 实现如下所示的布局效果:正常而言,我们的 HTML 结构大致是如下所示: {代码...} 对于 Hover 导航 Tab 时候的内容切换,暂且不谈。本文,我们核心想探讨的是两个点:一是对于如下所示的不规则布局,应该如何实现:并且,这里我们可能还需要给...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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