https://blog.qife122.com/tags/%E5%89%8D%E7%AB%AF%E8%AE%BE%E8%AE%A1/ Recent content in 前端设计 on 办公AI智能小助手 Hugo zh-cn qife Fri, 19 Sep 2025 08:10:05 +0800 https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E5%8A%A8%E7%94%BB%E8%BF%9B%E9%98%B6%E6%89%93%E9%80%A0%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C/ Fri, 19 Sep 2025 08:10:05 +0800 https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E5%8A%A8%E7%94%BB%E8%BF%9B%E9%98%B6%E6%89%93%E9%80%A0%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C/ <h1 id="smashing-animations-part-2-how-css-masking-can-add-an-extra-dimension">Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension</h1> <p><strong>Andy Clarke</strong><br> May 14, 2025<br> 0 comments<br> 15 min read<br> CSS, Animation, Design</p> <p>如果你能让CSS动画超越简单的淡入淡出和滑动效果，增添立体感和老派动画魔力呢？在这篇文章中，先驱作者和网页设计师Andy Clarke将向你展示遮罩如何为CSS动画解锁新的创意可能性，使其感觉更流畅、分层和电影化。</p> https://blog.qife122.com/p/svg%E5%8A%A8%E7%94%BB%E4%BC%98%E5%8C%96%E5%AE%9E%E6%88%98%E4%BB%8E%E8%AE%BE%E8%AE%A1%E5%88%B0%E4%BB%A3%E7%A0%81%E7%9A%84%E7%BB%93%E6%9E%84%E5%8C%96%E6%8A%80%E5%B7%A7/ Fri, 19 Sep 2025 06:38:50 +0800 https://blog.qife122.com/p/svg%E5%8A%A8%E7%94%BB%E4%BC%98%E5%8C%96%E5%AE%9E%E6%88%98%E4%BB%8E%E8%AE%BE%E8%AE%A1%E5%88%B0%E4%BB%A3%E7%A0%81%E7%9A%84%E7%BB%93%E6%9E%84%E5%8C%96%E6%8A%80%E5%B7%A7/ <h1 id="smashing-animations-part-4-optimising-svgs">Smashing Animations Part 4: Optimising SVGs</h1> <p>SVG动画让我回想起童年观看的Hanna-Barbera卡通片，如《Wacky Races》《The Perils of Penelope Pitstop》和《Yogi Bear》。这些动画激发我使用CSS、SVG和SMIL动画精心重现一些经典卡通标题。</p> https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E5%8A%A8%E7%94%BB%E8%BF%9B%E9%98%B6%E6%89%93%E9%80%A0%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C/ Wed, 17 Sep 2025 19:09:44 +0800 https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E5%8A%A8%E7%94%BB%E8%BF%9B%E9%98%B6%E6%89%93%E9%80%A0%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C/ <h1 id="smashing-animations-part-2-how-css-masking-can-add-an-extra-dimension">Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension</h1> <h2 id="什么是遮罩">什么是遮罩？</h2> <p>一个简单的遮罩示例出现在《Disguise and Gals》和无数其他卡通片的结尾。在这里，一个动画渐晕逐渐隐藏了Yogi的更多面部。遮罩后面的内容并没有被擦除，只是被隐藏了。</p> https://blog.qife122.com/p/css-%E9%81%AE%E7%BD%A9%E6%8A%80%E6%9C%AF%E4%B8%BA%E5%8A%A8%E7%94%BB%E5%A2%9E%E6%B7%BB%E6%96%B0%E7%BB%B4%E5%BA%A6%E7%9A%84%E9%AD%94%E6%B3%95/ Wed, 10 Sep 2025 21:24:41 +0800 https://blog.qife122.com/p/css-%E9%81%AE%E7%BD%A9%E6%8A%80%E6%9C%AF%E4%B8%BA%E5%8A%A8%E7%94%BB%E5%A2%9E%E6%B7%BB%E6%96%B0%E7%BB%B4%E5%BA%A6%E7%9A%84%E9%AD%94%E6%B3%95/ <h1 id="smashing-animations-part-2-how-css-masking-can-add-an-extra-dimension--smashing-magazine">Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension — Smashing Magazine</h1> <h2 id="什么是遮罩">什么是遮罩？</h2> <p>一个简单的遮罩例子出现在《Disguise and Gals》以及无数其他卡通片的结尾。这里，一个动画渐晕逐渐隐藏了Yogi的更多脸部。遮罩后面的内容并没有被擦除；只是被隐藏了。</p> https://blog.qife122.com/p/%E7%BB%8F%E5%85%B8%E5%8D%A1%E9%80%9A%E5%A6%82%E4%BD%95%E5%90%AF%E5%8F%91%E7%8E%B0%E4%BB%A3css%E5%8A%A8%E7%94%BB%E6%8A%80%E6%9C%AF/ Tue, 09 Sep 2025 01:28:53 +0800 https://blog.qife122.com/p/%E7%BB%8F%E5%85%B8%E5%8D%A1%E9%80%9A%E5%A6%82%E4%BD%95%E5%90%AF%E5%8F%91%E7%8E%B0%E4%BB%A3css%E5%8A%A8%E7%94%BB%E6%8A%80%E6%9C%AF/ <h1 id="粉碎动画第一部分经典卡通如何启发现代css">粉碎动画第一部分：经典卡通如何启发现代CSS</h1> <p>你是否曾想过早期卡通动画的限制如何与当今的网页设计相关联？从循环背景到最小帧变化，这些复古动画技术与现代CSS有着惊人的相似之处。在这篇文章中，先驱作者和网页设计师Andy Clarke展示了他如何将这些原则应用于艾美奖获奖作曲家Mike Worth的新网站，使用CSS制作引人入胜的趣味动画，将他的世界变得生动。</p> https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E6%8A%80%E6%9C%AF%E4%B8%BA%E7%BD%91%E9%A1%B5%E5%8A%A8%E7%94%BB%E5%A2%9E%E6%B7%BB%E7%AB%8B%E4%BD%93%E7%BB%B4%E5%BA%A6%E7%9A%84%E7%BB%88%E6%9E%81%E6%8C%87%E5%8D%97/ Sun, 07 Sep 2025 18:56:11 +0800 https://blog.qife122.com/p/css%E9%81%AE%E7%BD%A9%E6%8A%80%E6%9C%AF%E4%B8%BA%E7%BD%91%E9%A1%B5%E5%8A%A8%E7%94%BB%E5%A2%9E%E6%B7%BB%E7%AB%8B%E4%BD%93%E7%BB%B4%E5%BA%A6%E7%9A%84%E7%BB%88%E6%9E%81%E6%8C%87%E5%8D%97/ <h1 id="smashing-animations-part-2-如何用css遮罩增添额外维度">Smashing Animations Part 2: 如何用CSS遮罩增添额外维度</h1> <h2 id="什么是遮罩">什么是遮罩？</h2> <p>一个简单的遮罩例子出现在《伪装与女孩》和其他无数卡通片的结尾。在这里，一个动画渐晕逐渐隐藏了瑜伽熊的脸。遮罩后面的内容并没有被擦除，只是被隐藏了。</p>