旋转环形元素渐变叠加及Logo视口适配技术求助

我需要实现三个需求：

• 整个Logo在视口内正确缩放，元素间保持相对位置
• 仅为环形元素添加紫色（#8c04fe）到透明的渐变叠加
• 环形以不同速度反向旋转，同时保持渐变上下方向固定

我尝试用background: linear-gradient(8c04fe, transparent)给环形加渐变，但渐变根本没显示出来，现有代码如下：

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: transparent;
  /* Set a background color if needed */
}

.container {
  position: relative;
}

.title {
  position: relative;
  z-index: 2;
  /* Increase z-index for the title */
}

.core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* Reduce z-index for the cores */
  background: linear-gradient(8c04fe, transparent);
}


/* Define different sizes for Core 1, Core 2, and Core 3 */

.core1 {
  width: 48vw;
  height: 48vw;
}

.core2 {
  width: 32vw;
  height: 32vw;
}

.core3 {
  width: 16vw;
  height: 16vw;
}

@media (max-width: 768px) {
  .title img {
    max-width: 100%;
  }
  .core {
    width: 50%;
    /* Adjust the width as needed */
    max-width: none;
  }
}

<div class="container">
  <img class="core core1" src="https://drive.google.com/uc?id=1mPcXOui7mzn4N60ZcFzmb1wFTTX_CcG9" alt="Core 1">
  <img class="core core2" src="https://drive.google.com/uc?id=1_0TthVwoC9xjU7aYw3fn5dNjidqmVwrM" alt="Core 2">
  <img class="core core3" src="https://drive.google.com/uc?id=13hP0VO5kaEw5VkBiT2jhGG3upg78zum1" alt="Core 3">
  <div class="title">
    <img src="https://drive.google.com/uc?id=1fXAwjJmIGRbKzAlKGGUmCFwAUYZnXtwx" alt="Title Image">
  </div>
</div>

1. 自适应缩放+相对位置保留 #

之前用vw会导致竖屏时Logo溢出，换成vmin（取视口宽高中更小的那个值）作为容器单位，所有元素都用相对容器的百分比设置尺寸，不用额外媒体查询就能适配所有屏幕，同时保证元素间比例不变。

2. 渐变叠加的正确实现 #

你之前的渐变没显示是因为img元素的背景会被自身图片完全覆盖，得用伪元素来做渐变层：

• 给每个.core加::after伪元素，设置全屏渐变，这样渐变会叠加在环形图片上面
• 注意渐变颜色要加#，还要指定方向（to bottom），确保是从上到下的紫色到透明

3. 环形旋转+渐变固定 #

要让环形转但渐变不动，把渐变层和环形图片分离：

• 环形图片（.core）设置反向旋转动画，伪元素（渐变层）不跟着旋转，自然保持方向固定
• 给三个环形设置不同动画时长，实现不同速度的旋转

修改后的完整代码：

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff; /* 可选，方便查看效果 */
}

.container {
  position: relative;
  width: 48vmin; /* 用vmin适配横竖屏 */
  height: 48vmin;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 70%; /* 标题相对容器的比例，保持和环形的位置关系 */
}
.title img {
  width: 100%;
  height: auto;
}

.core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* 渐变叠加层 */
.core::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #8c04fe, transparent);
  pointer-events: none; /* 不干扰元素交互 */
}

/* 三个环形的尺寸和旋转动画 */
.core1 {
  animation: rotateReverse 20s linear infinite;
}
.core2 {
  width: 66.67%; /* 保持原32/48的比例 */
  height: 66.67%;
  animation: rotateReverse 15s linear infinite;
}
.core3 {
  width: 33.33%; /* 保持原16/48的比例 */
  height: 33.33%;
  animation: rotateReverse 10s linear infinite;
}

/* 反向旋转动画 */
@keyframes rotateReverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

<div class="container">
  <img class="core core1" src="https://drive.google.com/uc?id=1mPcXOui7mzn4N60ZcFzmb1wFTTX_CcG9" alt="Core 1">
  <img class="core core2" src="https://drive.google.com/uc?id=1_0TthVwoC9xjU7aYw3fn5dNjidqmVwrM" alt="Core 2">
  <img class="core core3" src="https://drive.google.com/uc?id=13hP0VO5kaEw5VkBiT2jhGG3upg78zum1" alt="Core 3">
  <div class="title">
    <img src="https://drive.google.com/uc?id=1fXAwjJmIGRbKzAlKGGUmCFwAUYZnXtwx" alt="Title Image">
  </div>
</div>

内容的提问来源于stack exchange，提问作者XPISigmaArt