重新创建Apple Music在CSS中击中播放列表动画

Apple Music的“空间音频”功能创建了基于设备定位的定向声音体验。但是，本文的重点是重新创建在带有空间音轨的Apple Music播放列表上观察到的CSS动画。播放列表封面展示了一个粉红色的容器，其中包装盒有动画：从中心褪色，然后向外缩放并褪色，创建一个无限的循环。

本教程详细介绍了如何使用CSS复制此效果。

HTML结构：

HTML非常简单，由容器和十个单独的盒子元素组成：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS样式：

CSS代码样式的容器和各个框。

容器样式：

该容器具有粉红色的背景，特定的尺寸（大约与Apple Music Visual匹配），圆角和overflow: hidden以防止盒子溢出。网格用于中心：

 。容器 {
  背景色：＃eb5bec;
  边界拉迪乌斯：16px;
  身高：315px;
  溢出：隐藏；
  位置：相对； / *用于绝对定位盒 */
  宽度：385px;
  显示：网格；
  地点项目：中心；
}

框样式和动画：

每个盒子都有深色背景颜色，初始不透明度和绝对定位。关键动画， grow ，使用@keyframes来定义缩放和不透明度更改。自定义属性--delay控制每个框的动画延迟，从而产生交错效果：

 。盒子 {
  背景：＃471E45;
  身高：100px;
  不透明度：0.5;
  位置：绝对；
  宽度：100px;
  动画：成长10s线性无限； / * 10盒10秒 */
  转化原始：中心； / *确保从中心缩放 */
}

.box：nth-​​child（n）{
  -delay：calc（1s * var（-n））; / *交错动画延迟 */
}

@KeyFrames成长{
  从 {
    不透明度：0.5;
    变换：比例（0）;
  }
  到 {
    不透明度：0;
    变换：比例尺（3.85）;
  }
}

:nth-child(n)选择器和calc()函数动态调整每个框的--delay 。比例因子（3.85）是根据框和容器尺寸计算的，以确保框到达容器边缘。

这种方法仅使用CSS有效地重新创建了Apple Music播放列表动画，展示了一种创造性的解决方案，可通过简单的代码复制复杂的视觉效果。

以上是重新创建Apple Music在CSS中击中播放列表动画的详细内容。更多信息请关注PHP中文网其他相关文章！