呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#前端 #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 CSS
#前端 #CSS #demo
这太酷了~

jhey ʕ•ᴥ•ʔ (@jh3yy): This CSS trick is fascinating ⭐️
By setting: [type=range] { overflow: hidden; }
You can create a view timeline on the handle:
::-webkit-slider-thumb { view-timeline: --thumb inline; }
And then you can use that to build all sorts of custom range sliders 🚀


https://fixupx.com/jh3yy/status/1816290576087515620
前端 CSS demo
#demo #codepen #WebGL #前端
好萌 🎄

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

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

在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中，您可以漫步于 JavaScript 海洋，欣赏日落美景，感受宁静祥和的氛围。别忘了尝试各种控件，打造属于您自己的独特体验。
demo codepen WebGL 前端
#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
Swiper
...
codepen demo CSS 前端 新特性
#demo #动画 #CSS #SVG #codepen
Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner
demo 动画 CSS SVG codepen
#demo #CSS #动画 #前端
jhey ʕ•ᴥ•ʔ (@jh3yy): hook this 3D CSS card up to device rotation? sure! 👨‍🍳

tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇


https://fixupx.com/jh3yy/status/1987948678787567644
demo CSS 动画 前端
#demo #codepen #动画
CSS 作用域自定义属性轨迹网格
在 Jhey Tompkins 设计的这款可配置 Pen 中，将鼠标悬停在加号网格上，即可观看它们变换颜色和旋转。您还可以通过顶部的控制面板调整网格大小和主题颜色。
demo codepen 动画
#demo #codepen #前端
酷是挺酷的，但是感觉 UX 不太符合用户直觉？
Custom curved scrollbars
Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。


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

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

via Codepen Spark#478
demo codepen 前端
#demo #codepen #动画 #CSS #SVG #设计
404 Error Face：Jon Kantner 基于 Camo Creative 的设计，将 404 错误页转为纯 CSS 和 SVG 的循环动画，用趣味视觉缓解用户体验挫败感。
demo codepen 动画 CSS SVG 设计
#demo #codepen #WebGL #Shader
写着色器的真的很 NB，每次看到都很佩服。
Juicy：Matthias Hurrle 的又一次关于次表面散射（subsurface scattering）的实验，模拟水果糖果风格的魔方。
demo codepen WebGL Shader
#demo #codepen #CSS #动画
这个是真的酷！
Gallery Button：纯 CSS 相册预览动画，具备折叠展开的纸张效果
demo codepen CSS 动画
#优质博文 #前端 #LiquidGlass #CSS #svg #demo #webgl #course
超级棒的交互式教程，并且技术解析的也很全面，内含非常多 demo，玩明白了，非常值得一看。
Liquid Glass in the Browser: Refraction with CSS and SVG

AI 摘要：本文通过物理折射原理（Snell 定律）、几何曲面函数、向量场计算以及 SVG displacement map，逐步构建出类似 Apple Liquid Glass 的玻璃折射与高光效果。作者在 Chrome 中实现了交互式演示，并展示了如何组合折射与高光生成 UI 组件（如 magnifying glass、searchbox、switch、slider、music player）。该方法目前仍为实验性质，仅限 Chromium 引擎支持。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 引言与目标
• Apple 在 WWDC 2025 引入 Liquid Glass 特效，形式上像弯曲玻璃产生的真实折射。
• 文章聚焦于折射物理与 CSS + SVG 技术结合，打造近似效果，而非完全复刻。

2. 折射原理（Refraction）
• 光在不同介质中的传播方向变化由 Snell 定律描述。
• 光线可能发生直线穿过、偏折、或在特定条件下全反射。
• 本文限制简化：空气介质、玻璃折射率 1.5、单次折射、平行二维场景。

3. 表面函数（Surface Function）与曲面建模
• 使用数学函数描述玻璃表面（厚度与曲率变化）。
• 四种典型函数：凸圆（convex）、squircle、凹面（concave）、Lip 混合曲线。
• 借助导数计算表面法线，用于后续光线折射角度推导。

4. 光线模拟与向量场计算
• 通过 ray tracing 可视化不同表面对光线的影响。
• 总结规律：凸面内聚，凹面外推。
• 基于对称性，预计算半径上的位移值，旋转生成完整 displacement field。
• 向量归一化处理，便于映射到位图。

5. SVG Displacement Map 实现
• <feDisplacementMap /> 用红绿通道（X/Y 轴）编码位移。
• 位移向量场需转为位图像素值（Color Encoding）。
• scale 属性用于匹配实际像素位移最大值。
• 支持动画 scale 参数，使折射动态变化。

6. 高光效果（Specular Highlight）
• 在折射效果之上叠加 rim light 模拟玻璃边缘光泽。
• 通过 feBlend 合成折射图层与高光。
• 高光强度取决于表面法线与光源角度。

7. 在 UI 组件中的应用（Proof-of-Concept）
• Magnifying Glass：双 displacement map 模拟放大镜折射 + 阴影。
• Searchbox：背景折射 + 边缘高光。
• Switch：Lip 曲线导致中间收缩，边缘放大。
• Slider：凸曲面保持背景可读性，边缘折射。
• Music Player：近似 Apple Music Liquid Glass 效果，结合磁贴相册背景。

8. 限制与展望
• 仅 Chromium 支持 backdrop-filter 调用 SVG filter。
• 性能瓶颈：动态形变需重建 displacement map。
• 可作为 Electron 等环境下的实验性特效；非生产级实现。
• 未来方向：代码优化、开放源码、跨引擎兼容处理。


author kube
优质博文 前端 LiquidGlass CSS svg demo webgl course
#前端 #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 webgl 着色器
#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 codepen svg gsap 动画
#优质博文 #前端 #CSS #动画 #demo
好，好酷的纯 CSS 动画……

Circular gallery of rounded images：利用少量CSS的 offset 属性和 :nth-child 选择器，即可创建一个将多张图片排列成同心圆的画廊效果。

⚠️ Limited support (Chrome only for now)
优质博文 前端 CSS 动画 demo
#优质博文 #CSS #demo #codepen #动画 #svg #webgl #液态玻璃
也是一个 Liquid Glass Web 实现合集 demo 整理，有几个实现的确实漂亮啊～
Liquid Glass on the Web

AI 摘要：本文深入探讨了 Apple 即将在其操作系统中全面采用的 Liquid Glass（液态玻璃）设计风格，并分析现有 web 技术如何实现这一视觉效果。作者梳理了 Liquid Glass 在网页端的多种实现方法，包括 CSS 的 backdrop-filter 和 SVG 滤镜（filter），并特别关注了该效果在可访问性（accessibility）上的挑战。文中还介绍了社区工具与实践案例，并指出 Liquid Glass 视觉语言强调的不仅是玻璃质感，还包含液体流动的动态感。


author Chris Coyier
优质博文 CSS demo codepen 动画 svg webgl 液态玻璃
#优质博文 #前端 #WebGL #three #demo
看了这篇突然意识到我写的那篇好烂ww完全不是面向基础的教程欸～感觉这种一步步来的真不好写。
Interactive Text Destruction with Three.js, WebGPU, and TSL | Demo

AI 摘要：本文是一篇关于使用 Three.js、WebGPU 和 Three Shader Language (TSL) 实现互动文字破坏效果的详细教程。作者通过一步步的代码示例和讲解，展示了如何在 Web 上创建动态的 3D 文字效果，利用指针位置和弹簧物理原理实现文字的变形与破坏动画，同时结合后处理技术增强视觉效果。文章不仅提供了技术实现细节，还分享了作者对 Web 互动体验发展的感悟，强调了 Three.js 等工具如何让 Web 重新焕发创意活力。

1. 文字几何体 (TextGeometry)：
• 内容：使用 TextGeometry 创建 3D 文字，配置字体、大小、深度、斜角等参数，并应用 MeshStandardMaterial 材质。通过计算 BoundingBox 将文字居中对齐。
• 总结：实现了 3D 文字的创建与居中，为后续的互动效果做好准备。

2. Three Shader Language (TSL)：
• 内容：详细介绍了使用 TSL 实现文字破坏效果的核心逻辑。包括存储顶点原始位置和法线、创建模拟数据的存储缓冲区、在 GPU 上运行初始化和更新计算函数、使用 uniforms 传递指针位置等数据、通过弹簧物理和摩擦力实现动态变形效果、添加噪声和旋转以增强动画的混乱感。
• 总结：通过 TSL 实现了基于指针位置的顶点变形和动态动画效果，展示了 GPU 计算在互动设计中的应用。

3. 材质与后处理：
• 内容：调整材质的发光颜色 (emissive color)，通过速度缓冲区偏移色调以产生多样化效果，并添加雾效和背景颜色。引入后处理技术，包括环境光遮蔽 (AO)、泛光 (bloom) 和噪声效果，提升画面质感。
• 总结：通过材质调整和后处理技术，增强了视觉表现力，使破坏效果更具冲击力。


author Lolo Armdz
Media is too big
VIEW IN TELEGRAM
优质博文 前端 WebGL three demo
#前端 #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
前端 demo 动画 css codepen
#前端 #趣站 #tools #webgl #three #demo #动画
洗衣机酱是一个 3D 洗衣店，在这里图像会被清洗。一个使用 Three.js 构建的本地、无广告的背景移除器——快速、私密、有趣。


好可爱好有创意！
https://tools.dverso.io/bgremove/
Media is too big
VIEW IN TELEGRAM
前端 趣站 tools webgl three demo 动画
 
 
Back to Top