摘要: 今天我们来学习一个有意思的多行文本输入打字效果,像是这样: 这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。 也就是如何在文本不断变长,在不确定行数的情况下,让文字的最末行右侧处,一直有一个不断闪烁的光标效果: 单行文本打字效果 在此 阅读全文
posted @ 2024-07-01 09:56 ChokCoco 阅读(1391) 评论(2) 推荐(13) 编辑
摘要: Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有 ::-webkit-scrollbar 规范可以控制滚动条,可是,::-webkit-scrollbar 是非标准特性,在 MDN 文 阅读全文
posted @ 2024-06-12 10:04 ChokCoco 阅读(944) 评论(0) 推荐(7) 编辑
摘要: 最近,群里在讨论这么一个有趣的交互效果,来源于:vueflow.dev: 通过审查元素,发现原效果借助了 Canvas 实现。 思索了一番,觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番,最终完美的复刻了该效果: 过程中还是有非常多有意思的技巧 阅读全文
posted @ 2024-05-11 09:53 ChokCoco 阅读(1927) 评论(5) 推荐(15) 编辑
摘要: 最近,群里在讨论一个很有意思的线条动画效果,效果大致如下: 简单而言,就是线条沿着不规则路径的行进动画,其中的线条动画可以理解为是特殊的光效。 本文,我们将一起探索,看看在不使用 JavaScript/Canvas 的基础上,使用纯 CSS/SVG 的方式,我们可以如何大致的还原上述的线条动画效果。 阅读全文
posted @ 2024-05-06 10:17 ChokCoco 阅读(2379) 评论(6) 推荐(41) 编辑
摘要: 最近,群里聊到了一个很有意思的布局效果。大致效果如下所示,希望使用 CSS 实现如下所示的布局效果: 正常而言,我们的 HTML 结构大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab 阅读全文
posted @ 2024-04-18 09:56 ChokCoco 阅读(1374) 评论(0) 推荐(19) 编辑
摘要: accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言,CSS accent-color 支持使用几行简单的 CSS 为表单元素着色,是的,只需几行代码就 阅读全文
posted @ 2024-02-27 10:32 ChokCoco 阅读(1808) 评论(2) 推荐(19) 编辑
摘要: 最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果: 该效果的几个核心点: 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H 阅读全文
posted @ 2024-01-22 10:59 ChokCoco 阅读(3449) 评论(8) 推荐(58) 编辑
摘要: 在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。 其功能能够涵盖: 精简 调暗 饱和度 降低饱 阅读全文
posted @ 2024-01-08 10:14 ChokCoco 阅读(4007) 评论(9) 推荐(32) 编辑
摘要: 今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: div { border-radius: 25px; border: 2px dashed #aaa; } 但是,原生的 dashed 有一个问题, 阅读全文
posted @ 2023-12-13 10:31 ChokCoco 阅读(2224) 评论(4) 推荐(24) 编辑
摘要: 在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: <ul class="g-contaner"> <li></li> <li></li> </ul> ul { width: 500px; display: flex; flex-direction: r 阅读全文
posted @ 2023-12-07 10:28 ChokCoco 阅读(2214) 评论(0) 推荐(20) 编辑