#设计 #动画 #卡片 #交互设计

UI Cards Hover Collection ™

https://fixupx.com/markoilico/status/1936816258525356227

FixupX

Marko Ilic (@markoilico)

UI Cards Hover Collection ™

#趣站 #交互设计 #设计 #webgl #动画
好看的站点！
https://jordan-delcros.com/

Jordan Delcros 重建了个人作品集，展示其 WebGL、动画和交互式开发方面的最佳项目和技能，标志着其作为自由职业开发者的全新旅程。

via Jordan Delcros Portfolio - Awwwards SOTD

#优质博文 #前端 #css #动画 #交互设计 #设计
Animated Product Grid Preview with GSAP & Clip-Path

AI 摘要：本文详细介绍了一种利用 GSAP 和 CSS clip-path 技术实现的创意产品网格到全预览的悬停交互效果。作者受到设计伙伴的灵感启发，通过简化和视觉错觉的方式，将复杂的动画效果分解为多个步骤实现，包括布局设置、clip-path 动画、产品卡片移动、预览图像缩放以及图片画廊效果等。教程不仅展示了技术实现，还强调了简化和优化代码的重要性，同时关注了可用性和可访问性问题，适合对前端动画和交互设计感兴趣的开发者学习。

author Gwen Bogaert

Codrops

Animated Product Grid Preview with GSAP & Clip-Path | Codrops

Learn how to transform a simple product grid into an interactive, animated preview experience using GSAP in this hands-on tutorial.

#前端 #demo #css #交互设计 #design
好酷哦，感觉这个加上音效一定会很解压（

Volume Dials 音量调节按钮
Jon Kantner 受 Thomas Lau 的 Dribbble 照片启发，用这三个音量旋钮的漂亮的深色和浅色主题展示了他对 CSS 阴影和光线的掌握。

via Light & Dark Mode Themes with CSS | CodePen Spark Feed 437

#前端 #动画 #设计 #交互设计
Mery(merycodes): Testimonials carousel 🎠
https://fixupx.com/merycodes/status/1899169320212533311

#优质博文 #前端 #动画 #motion #css #动画 #交互设计
不得不说真棒啊，给了我好多灵感和小点子~能把自己做的什么讲的明明白白好厉害。

A Million Little Secrets 一百万个小秘密

AI 摘要：本文详细拆解了Josh W. Comeau为其动画课程设计的登录页面的技术实现。该页面看似简洁，但包含 14,000+ 行代码和 200+ 文件，通过多个交互工具（如“Chaos Toolbar”）和动态效果（如粒子、爆炸、魔法棒变换）展示前端动画技术。
核心内容包括：
1. SVG动画 ：通过分组（ <g> 标签）与 transform-origin 控制图标动画（如炸弹旋转、橡皮擦路径分离）。
2. 粒子系统 ：利用极坐标系生成随机方向粒子，结合 CSS 三角函数与动画延迟实现自然效果。
3. 雪碧图优化 ：将 22 个 3D 形状合并为单图，通过 object-position 定位，减少加载闪烁与带宽消耗。
4. 音效设计 ：使用多采样、按键反馈音效与自定义录音增强交互真实感，并开源 React Hook 库 use-sound 。
5. Canvas 烟花：基于极坐标和物理模拟实现庆祝效果，强调“新颖性”对动画趣味性的重要性。
此外，作者分享了开发中的取舍（如舍弃糖果主题素材）、性能优化策略（如 5 秒加载超时控制）及未来计划（如 prefers-reduced-data 适配）。

via Josh W Comeau

Joshwcomeau

A Million Little Secrets • Josh W. Comeau

I spent the past few weeks packing as many easter eggs as I could into my latest project, and in this blog post, I want to dig into some of the more interesting details! If you’re interested in animations/interactions, you’ll want to check this one out; I…

#动画 #设计 #前端 #交互设计 #tools #demo
有点子酷的：https://vxtwitter.com/nitishkmrk/status/1833031583739289953

https://khagwal.com/interactions/

vxTwitter / fixvx
💖 1.51K 🔁 79

Nitish Khagwal (@nitishkmrk)

create new disclosure interaction ⎯⟡°

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

作者 Mert Cukuren

#优质博文 #前端 #动画 #css #交互设计 #react

云音乐2023年度听歌报告动效大揭秘

【这个好啊，很长，推荐阅读】

AI 摘要：
动效设计流程
年度听歌报告是网易云音乐的保留节目，本文介绍了2023年度报告的动效设计过程。传统流程为设计师制作动画效果并交给开发人员实现代码，但对于年度听歌报告这样的大项目，此流程效率低。为提高效率，动效设计师直接用代码实现动效，前端专注业务逻辑，最后进行代码合并。

翻页动效
主要使用React的CSSTransition组件实现页面的淡入淡出效果，并设置合适的背景色以避免翻页时的闪烁感。

文字动效
使用CSS Animation实现文字的渐现和位移效果，主要通过调整animation-timing-function属性来控制动画节奏。

简单页面动效
具体页面如“初次相遇”页面，通过父容器和子容器分别实现流星从天而降、爆闪和循环闪烁的效果。

通过优化设计和实现流程，以及巧妙运用React和CSS技术，网易云音乐2023年度听歌报告实现了温暖轻快的动画效果。

via 微信公众号 网易云音乐技术团队

Weixin Official Accounts Platform

云音乐2023年度听歌报告动效大揭秘

2023网易云音乐年度听歌报告已经上线，你它被刷屏了吗？有没有好奇那些精美的动效是如何制作的呢？这篇文章将为你揭秘年报的动效是如何设计和落地的。

#优质博文 #交互设计
Invisible Details of Interaction Design

AI 摘要：这篇文章探讨了交互设计中不易察觉的细节，强调了设计师如何利用我们与实体世界的自然互动来增强虚拟界面的直观性和响应性。作者通过深入分析简单手势如轻触、滑动和捏合的物理和心理层面，阐述了如何在设计中运用这些手势来模拟现实世界的动态。此外，文章还探讨了通过细微的动画和视觉反馈来提高用户界面的直观性和效率的方法。

via rauno

rauno.me

Invisible Details of Interaction Design

What makes great interactions feel right?

#趣站 #css #交互设计
Drams Framer

赛博解压玩具网站 (x)
超解压且写实的按钮动画和音效（）

Product Hunt 链接：https://www.producthunt.com/posts/drams

#前端 #设计 #交互设计 #demo
前端交互地花板？我的个人网站演示

Bilibili

前端交互地花板？我的个人网站演示_哔哩哔哩_bilibili

传送门🚪: https://www.jiejoe.com小伙伴们，想看网站哪一部分的代码实现，可以在评论区告诉我，或者在弹幕催我也可以哦喜欢这个视频的话，就点个赞吧❤, 视频播放量 71012、弹幕量 141、点赞数 3251、投硬币枚数 1607、收藏人数 3639、转发人数 455, 视频作者 JIEJOE_轻敲代码, 作者简介 欢迎来我的网站逛逛: www.jiejoe.com
有事请V(备注来意): JIEJOE_0821，相关视频：10种UI设计中常见的动画效果，莫比斯风格网页 灵感无限！，我…