Webtagr - 科技资讯摘要

超炫酷的动画课程落地页：14000+行代码的幕后故事

2025-02-28

作者耗时数月打造了一个极具创意的动画课程落地页，页面包含14000多行代码和200多个文件。该页面包含一个“混沌工具栏”，用户可以使用抓取、橡皮擦、炸弹和魔杖等工具与页面互动，每个工具都带有独特的动画效果。作者详细介绍了如何利用SVG动画、极坐标系和精灵图等技术实现这些效果，并分享了如何使用CSS变量和关键帧动画优化性能，以及如何巧妙地处理声音效果和粒子效果。此外，他还介绍了课程内容，包括使用原生Web技术（CSS、JavaScript、SVG和2D Canvas）创建动画和交互，以及React集成。该课程旨在帮助学员掌握设计和创建各种动画效果的核心技术，并鼓励学员创造独特的视觉效果。

(www.joshwcomeau.com)

开发动画效果

更上一层楼的毛玻璃效果：backdrop-filter 的妙用

2024-12-07

本文介绍了如何使用 CSS 的 backdrop-filter 属性创建更逼真的毛玻璃效果。文章指出，开发者通常只使用 `backdrop-filter: blur()`，但忽略了周边元素的影响，导致效果失真。作者提出了一个巧妙的解决方案：通过创建一个更大的子元素，应用模糊滤镜，再用遮罩将其修剪回原始大小，从而将周边元素纳入模糊范围。文章还讨论了指针事件、顶部闪烁、玻璃厚度、浏览器兼容性以及玻璃边缘效果等问题，并提供了最终代码示例。

(www.joshwcomeau.com)

6

未分类毛玻璃效果 backdrop-filter

现代 CSS 重置

2024-10-25

本文介绍了作者Josh W. Comeau的自定义 CSS 重置方案，旨在改善用户体验和 CSS 开发体验。该方案并非完全清除所有浏览器默认样式，而是保留一些常用样式，并针对一些常见问题提供解决方案，例如：使用 `box-sizing: border-box` 简化盒子模型计算，移除所有元素的默认外边距，设置更易于阅读的行高，改善文本渲染，优化媒体元素默认样式，使表单控件继承字体样式，避免文本溢出，改进换行算法，以及为 React 等 JavaScript 框架创建根堆叠上下文。

(www.joshwcomeau.com)

28

未分类 CSS Reset