【第3350期】使用 CSS 创建奥林匹克环

文章预览

前言 介绍如何使用 CSS 技术创建奥运五环标志的效果。今日前端早读课文章由 @飘飘翻译分享。 正文从这开始～～ 就在 2020 年东京奥运会期间，我制作了一个动画 3D 奥运五环的演示。我非常喜欢这个效果，看起来很棒，我喜欢环环相交的效果。 但是代码本身已经有些过时了。我是用 SCSS 写的，而且写得有些混乱。我知道它可以写得更好，至少按照现代的标准来说。 所以，为了纪念今年的奥运会，我决定从头开始重建这个演示。这次我使用纯 CSS，并利用了诸如三角函数等现代特性，以减少使用 “魔法数字” 的情况，并使用相对颜色语法来更好地管理颜色。令人惊喜的是，新的演示程序的代码行数比 2020 年我编写的旧的 SCSS 版本还要少，而且运行效率更高！ 再次查看第一个演示中的 CSS 选项卡，因为我们将使用一种完全不同且更好的方法。让我们 ………………………………