#前端 #demo #codepen #CSS
CSS 之神在上，这太酷了。
Animated Hover Disclosures

jhey ʕ•ᴥ•ʔ(@jh3yy): transitioning CSS grid-template-columns on :focus/:hover means the parent container won't change size 🏅

https://fixupx.com/jh3yy/status/1940066323658158198

#demo #codepen #WebGL #前端
好萌 🎄

https://codepen.io/creativeocean/pen/zxqEWYd

Tom Miller 用这段精美的 JavaScript 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上，即可让它闪耀夺目！

#demo #codepen #WebGL #前端
Cinematic Ocean Scroll Scene

在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中，您可以漫步于 JavaScript 海洋，欣赏日落美景，感受宁静祥和的氛围。别忘了尝试各种控件，打造属于您自己的独特体验。

#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...

#codepen #前端 #CSS
Creepy Button

"这个按钮在监视你"。从 Jon Kantner 这款俏皮的按钮下面探出头来，你会发现一双卡通眼睛正在跟踪你的一举一动👀。

#demo #动画 #CSS #SVG #codepen
Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner

#demo #codepen #动画
CSS 作用域自定义属性轨迹网格

在 Jhey Tompkins 设计的这款可配置 Pen 中，将鼠标悬停在加号网格上，即可观看它们变换颜色和旋转。您还可以通过顶部的控制面板调整网格大小和主题颜色。

#demo #codepen #前端
酷是挺酷的，但是感觉 UX 不太符合用户直觉？
Custom curved scrollbars

Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。

核心原理是隐藏原生滚动条，在容器上方叠加一层 SVG，画一条沿容器圆角轮廓的轨迹，并将滚动条当作这条路径上的一段子路径来渲染，用视口高度与内容高度的比例计算滚动条长度。

拖动时根据指针的垂直位置换算滚动比例写回 scrollTop，滚动与窗口尺寸变化时同步重算路径，颜色与粗细则由 CSS 变量和交互状态控制。

via Codepen Spark#478

#demo #codepen #动画 #CSS #SVG #设计
404 Error Face：Jon Kantner 基于 Camo Creative 的设计，将 404 错误页转为纯 CSS 和 SVG 的循环动画，用趣味视觉缓解用户体验挫败感。

#demo #codepen #WebGL #Shader
写着色器的真的很 NB，每次看到都很佩服。
Juicy：Matthias Hurrle 的又一次关于次表面散射（subsurface scattering）的实验，模拟水果糖果风格的魔方。

#demo #codepen #CSS #动画
这个是真的酷！
Gallery Button：纯 CSS 相册预览动画，具备折叠展开的纸张效果

#前端 #demo #codepen #webgl #着色器
一组抛光的着色器
Orbs N Ringz by Matthias Hurrle
是建立在 tw_orbsNringz 上的着色器实现

Orbs N Ringz
Matthias Hurrle carves out a set of polished shapes in this "Fun little shader doodle, heavily influenced by KomaTebe's tw_OrbsNRingz. I just wanted to recreate it with only a fragment shader so I could play around with it."

via CodeSparkle#467

#demo #codepen #svg #gsap #动画
Rainbow Loop 彩虹循环

Tom Miller takes inspiration from a rainbow of crayon colors by wearepretendfriends for this brilliant GSAP-fueled SVG animation.
Tom Miller 从 wearepretendfriends 的彩虹蜡笔颜色中汲取灵感，制作了这个精彩的 GSAP 驱动的 SVG 动画。

#前端 #demo #动画 #css #codepen

jhey ʕ•ᴥ•ʔ(@jh3yy): number range slider using 3D CSS transforms
sometimes a shift in perspective unlocks a new solution
check the reveal👇
使用 3D CSS 转换的数字范围滑块
有时，视角的转变会解锁新的解决方案
检查显示 👇

https://fixupx.com/jh3yy/status/1945596617802867087

https://codepen.io/jh3y/pen/xxvVWxN

#前端 #codepen #demo #液态玻璃 #svg
感觉是复刻的最像的一个了（包括可读性）
录的视频看不太出来，实际体验还挺好的
"liquid glass" — scroll, drag, configure [Chromium]

"它并不完美，但平台也不是。我们依然爱它。" Jhey Tompkins 用他对于 WWDC25 中最受喜爱/最厌恶的事物——液态玻璃的演绎，满足了人们的需求。

via Codepen Spark#454

ref: https://t.me/cosine_front_end/2554

#demo #codepen #动画 #svg #webgl #液态玻璃
Codepen Spark#453
Liquid and Glass 大合集
好多啊好多啊，我们前端花活就是多啊.webp

#前端 #codepen #demo #动画 #svg #gsap
Colourful GSAP animated SVG radio buttons

Josh Dillon continues an electrifying exploration of glitch animation in UI with this set of radio buttons. Make sure to visit Josh's collections for more.

via Codepen Spark#452

#demo #codepen #css
看了一眼， 果然是 css preserve-3d。
Photo³

使用 RAFA3L 的这款互动笔，体验“立方体照片库实验”。待在房间里，照片会慢慢铺满整个房间，然后点击任意一张图片即可全屏观看。

via CopenSpark#451

#demo #codepen #webgl #动画
着色器时钟 \ WebGL 片段着色器

pjkarlik 分享了一个能根据一天中的时间改变颜色的奇妙 WebGL 时钟。“我脑子里一直在想这个，想做一个时钟着色器。数学运算有点乱，而且为了让表盘正常工作，在时间上还需要一些技巧性的逻辑"。

via CopenSpark#451