CSS奥林匹克环

>本文重新审视了一个2020年的项目：动画3D奥林匹克环。 原始的SCSS代码虽然功能性，但缺乏现代效率。此更新的版本使用纯CSS，利用三角函数和相对颜色语法，以清洁，更简洁的代码。 结果是一个更具性能和优雅的解决方案。

使用分层divs实现3D效果。每个戒指都包含16层，每个环都有略有不同的阴影，以产生照明效果。 层的大小和定位产生了三维环的幻觉。 元素组成（一个元素），每个元素包含16个代表层的嵌套元素。 每个

元素使用自定义属性<div>（从1到16不等）通过CSS控制其样式。 EMMET可以简化创建重复的HTML结构。 这是一个片段：<code><i></i> <i></i> --i属性用作层，大小和颜色的CSS计算中的乘数​​。

<div class="rings">
  <div class="ring ring__1">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <!-- ... more layers ... -->
    <i style="--i: 16;"></i>
  </div>
  <!-- ... more rings ... -->
</div>

> CSS样式

--i

容器使用

>包含绝对定位的环。 每个

绝对是定位的，其儿童继承了绝对定位。

>创建圆形。 自定义属性.rings设置基本颜色。position: relative .ring<i></i>属性设置为负值，将图层定位在border-radius: 50%>元素之外，从而有效地定义了其大小。 使用--ringColor进行计算的自定义属性，沿z轴定位图层以创建深度：>

用相对颜色语法的阴影

使用相对颜色语法可以实现inset阴影。根据.ring计算的自定义属性，修改了--translateZ>的轻度：--i

.ring {
  position: absolute;
  --ringColor: #0085c7;
  i {
    position: absolute;
    inset: -100px;
    border-radius: 50%;
    --translateZ: calc(var(--i) * 2px);
    transform: rotateY(-45deg) translateZ(var(--translateZ));
  }
}

>这种动态变暗的层向后变暗，从而增强了3D效果。 添加轮廓以确保在环的内边缘和外部边缘可见阴影。>

塑形和动画

--light使用--i函数计算的自定义属性确定边框厚度，创建环的圆形形状：--ringColor

i {
  --light: calc(var(--i) / 16);
  --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light)));
  border: var(--size) var(--layerColor) solid;
  outline: var(--size) var(--layerColor) solid;
}

>动画是使用

和

>属性实现的。 每个戒指的动画持续时间都由自定义属性

控制，带有负面延迟，以使动画交错。

最终触摸和优化

>在.rings）会产生模糊的阴影，进一步增强3D效果。 最终的CSS是高度优化和重复使用的，展示了现代CSS功能的力量。 该代码比原始SCSS版本要高得多和可维护。>

以上是CSS奥林匹克环的详细内容。更多信息请关注PHP中文网其他相关文章！