摘要: 最近,群里在讨论这么一个有趣的交互效果,来源于:vueflow.dev: 通过审查元素,发现原效果借助了 Canvas 实现。 思索了一番,觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番,最终完美的复刻了该效果: 过程中还是有非常多有意思的技巧 阅读全文
posted @ 2024-05-11 09:54 ChokCoco 阅读(1458) 评论(4) 推荐(14) 编辑
摘要: 最近,群里在讨论一个很有意思的线条动画效果,效果大致如下: 简单而言,就是线条沿着不规则路径的行进动画,其中的线条动画可以理解为是特殊的光效。 本文,我们将一起探索,看看在不使用 JavaScript/Canvas 的基础上,使用纯 CSS/SVG 的方式,我们可以如何大致的还原上述的线条动画效果。 阅读全文
posted @ 2024-05-06 10:17 ChokCoco 阅读(1945) 评论(6) 推荐(39) 编辑
摘要: 最近,群里聊到了一个很有意思的布局效果。大致效果如下所示,希望使用 CSS 实现如下所示的布局效果: 正常而言,我们的 HTML 结构大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab 阅读全文
posted @ 2024-04-18 09:57 ChokCoco 阅读(1199) 评论(0) 推荐(19) 编辑
摘要: accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言,CSS accent-color 支持使用几行简单的 CSS 为表单元素着色,是的,只需几行代码就 阅读全文
posted @ 2024-02-27 10:33 ChokCoco 阅读(1686) 评论(2) 推荐(19) 编辑
摘要: 最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果: 该效果的几个核心点: 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H 阅读全文
posted @ 2024-01-22 10:59 ChokCoco 阅读(3215) 评论(8) 推荐(58) 编辑
摘要: 在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。 其功能能够涵盖: 精简 调暗 饱和度 降低饱 阅读全文
posted @ 2024-01-08 10:15 ChokCoco 阅读(3469) 评论(9) 推荐(32) 编辑
摘要: 今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: div { border-radius: 25px; border: 2px dashed #aaa; } 但是,原生的 dashed 有一个问题, 阅读全文
posted @ 2023-12-13 10:32 ChokCoco 阅读(2027) 评论(4) 推荐(24) 编辑
摘要: 在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: <ul class="g-contaner"> <li></li> <li></li> </ul> ul { width: 500px; display: flex; flex-direction: r 阅读全文
posted @ 2023-12-07 10:29 ChokCoco 阅读(1962) 评论(0) 推荐(20) 编辑
摘要: 最近,相信大家一定被这么个动效给刷屏了: 以至于,基于这个效果的二次创作层出不穷,眼花缭乱。 基于跨窗口通信的弹弹球: 基于跨窗口通信的 Flippy Bird: 我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动,效果如下: 代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - 阅读全文
posted @ 2023-11-28 10:44 ChokCoco 阅读(4165) 评论(16) 推荐(54) 编辑
摘要: 最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。 这个效果在很多场景都会出现,可以算是一个 阅读全文
posted @ 2023-11-14 10:26 ChokCoco 阅读(2906) 评论(1) 推荐(18) 编辑