#前端 #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

#前端 #css #demo #codepen #notify #svg #anim
the 🔔 tolls for thee by leimapapa

一个动态通知铃铛图标，可通过不同设置触发不同的通知状态。

技术浅析：
1. SVG 中的 <animateTransform> 和 <animate> 标签被用来添加铃铛晃动和数字切换的动画效果。
2. 定义了一个 notify 函数，接收通知的数量和自定义属性（如铃铛颜色、速度等），并根据这些参数动态生成 SVG 内容，展示通知的数量和铃铛的动画。
3. <animateTransform> 标签用于对 SVG 元素进行变换动画，比如旋转、缩放、移动等。在这个例子中，它主要用于实现铃铛摇摆的动画效果。

attributeName="transform    // 指定要进行动画的属性名。
attributeType="XML"         // 定义动画属性的类型，这里为 XML 类型，表示操作 SVG 属性。
type="rotate"       // 指定变换类型为旋转。
values              // 定义旋转动画的值序列，格式为 "0 50 45; -12 50 45; 0 50 45; 12 50 45; 0 50 45"`，意味着铃铛会围绕 `(50, 45) 这一点进行前后摇摆。
dur                 // 动画持续时间，由 ringSpeed 属性动态指定。
repeatCount         // 动画重复次数，根据通知数量动态决定。
calcMode="spline"   // 动画计算模式，spline 使动画按照特定的速率曲线运动，使动画更平滑。

4. <animate> 标签用于添加基本的属性动画，比如颜色变换、透明度变化等。在这个例子中，它被用于实现徽章大小的动态变化和铃舌的左右移动。

attributeName  // 指定要进行动画的属性，如 r （圆的半径）和 cx （圆心的 x 坐标）。
values         // 定义属性值随时间变化的序列。例如，徽章大小的动画使用 "15;17;15" 表示半径从 15 变到 17 再变回 15，模拟一种跳动效果。
// dur 和 repeatCount 同上，指定动画持续时间和重复次数。

这些动画被应用于铃铛的不同部分：
- 铃铛体的旋转动画（ <animateTransform> ），模拟接到通知时铃铛的摇晃。
- 徽章的脉冲动画（ <animate> ），通过半径的变化给用户一种“通知”正在“跳动”的感觉。
- 铃舌的左右移动（ <animate> ），配合铃铛体的旋转，增加了动画的真实感。

#前端 #css #demo #codepen
Shattering Images by Szenia Zadvornykh

一个独特的图片破碎效果，是需求时调研发现的。

技术分析：
- 使用Delaunay三角剖分算法将图片分割成若干个三角形片段
- 每个三角形创建一个Fragment对象。
- 每个Fragment对象包含一个小的canvas元素，该元素只绘制对应的三角形片段。
- 通过对每个Fragment的canvas应用动画效果，实现整个图片的破碎效果。
- 动画效果使用gsap库（TweenMax和TimelineMax）来实现

#前端 #css #demo #codepen
Animating text using Typed JS by Allistair Lee

「Simple text typewriter animation using Typed JS by Matt Boldt.」

打字机效果，博客可参考

#前端 #css #demo #codepen
Progress of this year. Keep tracking by Andrey

感觉适合博客之类的场景 #progress

#前端 #css #demo #codepen
Merging Letter Toggle by Jon Kantner

「拨动开关与 FF 或 N 组合可拼写“OFF”或“ON”，字母根据状态合并或拆分。#switch #toggle #input #animation #svg 」

这是我见过最丝滑的svg切换开关动画之一（）