#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

#css #codepen #demo #动画
纯 CSS 滚动控制的滑动过渡
https://codepen.io/thebabydino/pen/azObZOe

Ana Tudor 🐯🖤🌻 (@anatudor)：Made a little thing on
@CodePen: pure #CSS scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe is always clockwise, regardless of scroll direction and how the text fades in after the swipe.

Inspiration https://x.com/avanderpotte/status/1923382432784412771 (via @codrops)

Source

0:09

Media is too big

VIEW IN TELEGRAM

#前端 #codepen #demo #动画 #设计
受 Braun 风格启发的时钟

Filip Zrnzevic 精心重现了 Braun 玻璃钟的外观和功能。在预览模式下按下 H 键，即可打开设置面板，调整时钟的内部运作。

via CodePen Spark 450

#前端 #demo #webgl #动画 #codepen #svg
SVG Filter BurnEffect
很酷的 Burn 效果，使用 SVG Filter 实现。
https://fixupx.com/jh3yy/status/1926072273095491728

FixupX

jhey ʕ•ᴥ•ʔ (@jh3yy)

messin' with SVG filter burn effects 🔥

#codepen #demo #动画 #css
Dynamic Toggle with [type=radio] + :has()
Jhey Tompkins 以最优雅的方式处理了多个切换选项，完美地展示了 CSS :has() 伪类的强大功能。

via Codepen Spark#445

#demo #前端 #动画 #codepen #css
好爽！这个滚起来真解压吧～
文本圆圈动画（仅限 CSS ）

Stijn Van Minnebruggen 使用旧的 CSS 重新创建了 David Faure 为 Codrops 制作的 Three.js 动画。滚动以转动单词之轮，并观察字母对滚动速度和长度的反应。

原理上大致是通过 @property 定义自定义变量控制旋转，使用 animation-timeline: scroll() 将动画与页面滚动绑定。单词均匀分布在圆周上，每个字母根据滚动速度计算位移和旋转值，并应用不同延迟创造瀑布效应。

#demo #前端 #动画 #codepen
好酷，好有创意的黑洞。
Creative Black Hole

It's hard to avoid getting totally drawn in to the soft gradients and texture details of Antoine Wodniack's neon JavaScript black hole.
在 Antoine Wodniack 的霓虹 JavaScript 黑洞作品中，你很难不被柔和的渐变和纹理细节所吸引。

#codepen #demo #交互设计 #动画
过于丝滑引起极端舒适
https://codepen.io/knyttneve/pen/YgZbLO

作者 Mert Cukuren

#css #前端 #demo #小知识 #codepen

CSS Tip 📖

Use CSS shape-outside to wrap text around shapes

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%));
}

jhey 分享了使用CSS shape-outside 属性来围绕形状包裹文本的技巧。通过在两列布局中为每一列设置一个半圆形状，可以实现复杂的文本环绕效果。此方法要求手动分割内容到列中，不支持与 column-count 属性协同工作。尽管有这样的限制，但这种方法适用于某些登陆页等场景，是2024年中浮动布局(float layout)的一个罕见但有效的应用案例。

Origin Post | Codepen