为优秀的人准备的优秀事物 - 2020年7月

CSS 3D烤面包机

使用 HSL 和作用域 CSS 变量来构建 UI 原型

一个动画单div树！

苹果在这里！

章鱼熊

发货！

稍后回来

使用 CSS 滤镜和裁剪路径显示图像

兰比尔

无分动卡车

CSS简直太简单了！

CSS纪念碑

使用 CSS 实现流畅的动画下划线。

CSS 赛博朋克按钮

带有画布的灭霸模拟器

动态谷歌字体

因为不是每个人都会订阅我的电子报。

以下是我七月份制作的一些作品汇总👍

CSS 3D烤面包机

点击即可翻转吐司！这里还有一些隐藏功能哦！

使用 HSL 和作用域 CSS 变量来构建 UI 原型

一个简单的演示，展示如何利用 HSL 和 CSS 变量快速构建 UI 组件原型。

您可以在这里观看视频演示。

一个动画单div树！

用Pxl构建的动画树。

苹果在这里！

章鱼熊

七月份看到好多自制的章鱼猫，所以我也做了个丑陋的玩意儿！

发货！

又一个 GreenSock 按钮加入收藏啦😅 点击这个按钮可以欣赏有趣的动画。记得打开声音哦。

稍后回来

终于为我的直播创建了一个 BRB 场景。

使用 CSS 滤镜和裁剪路径显示图像

结合这两个属性，创建“炫酷”的图像悬停显示效果😎

兰比尔

无需多言。Rambear 已部署完毕，助您高效运行代码。

无分动卡车

或许有点讽刺意味。但是，在见识了那么多单 div 元素之后，是时候来点“无 div”的了。这个场景是使用标签上的伪元素构建的body。

CSS简直太简单了！

点击每一片，都会显示不同的内容。

CSS纪念碑

这个月主要讲的是3D CSS。

使用 CSS 实现流畅的动画下划线。

这些很棒。如果你的项目需要一些与众不同的东西，我这里有一份详细的教程。

CSS 赛博朋克按钮

我们尝试在直播中制作一些赛博朋克风格的按钮，方法是在网站上四处寻找灵感。

带有画布的灭霸模拟器

轻敲或点击手指（在麦克风附近发出声音😅）即可让一半的人消失！

动态谷歌字体

现在你可以从 Google Fonts 获取可变字体了！这带来了很多好处。其中一个有趣的功能是给字体轴添加动画效果😅

我还就此写了一篇文章。

CSS动画Google字体

Jhey Tompkins ・ 2020 年 7 月 2 日 ・ 阅读 3 分钟

#动画 #CSS #设计 #网页开发

想看更多内容吗？请在Twitter上联系我们并打个招呼！