能否用纯HTML和CSS实现div从下到上的分段扭曲旋转动画？

仅用HTML和CSS完全可以实现你要的效果，下面是几个实用的实现思路：

思路1：渐变遮罩+双动画叠加 #

• 核心逻辑：给持续旋转的元素加一个垂直渐变遮罩，通过动画移动遮罩位置，让旋转效果从下往上逐步“透出”
• 实现步骤：
  1. 给目标元素设置循环旋转的关键帧动画
  2. 用mask-image设置从透明到实色的垂直渐变遮罩（兼容旧浏览器可加-webkit-mask-image前缀）
  3. 给遮罩添加位置动画，从元素底部移动到顶部，实现遮罩逐步褪去，露出旋转效果
• 代码示例：

<div class="gene-twist"></div>

.gene-twist {
  width: 80px;
  height: 300px;
  /* 模拟基因条纹背景 */
  background: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #3498db 10px, #3498db 20px);
  /* 旋转动画 */
  animation: rotate 2s linear infinite;
  /* 渐变遮罩 */
  mask-image: linear-gradient(to top, transparent, black);
  mask-size: 100% 200%;
  mask-position: 0 100%;
  /* 遮罩移动动画 + 旋转动画叠加 */
  animation: reveal 3s ease-in-out infinite, rotate 2s linear infinite;
}

/* 遮罩移动：从下往上褪去 */
@keyframes reveal {
  0% { mask-position: 0 100%; }
  100% { mask-position: 0 0%; }
}

/* 水平旋转 */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

思路2：分段元素+延迟动画 #

• 核心逻辑：把基因条拆成多个垂直小片段，给每个片段设置相同的旋转动画，但依次增加延迟时间，让旋转从下往上逐个触发
• 实现步骤：
  1. 创建容器，内部放多个等高子元素拼接成完整基因条
  2. 给所有子元素设置旋转动画，用nth-child选择器给每个子元素设置递增的animation-delay
  3. 容器设置overflow: hidden保证整体视觉连贯
• 代码示例：

<div class="gene-container">
  <div class="gene-segment"></div>
  <div class="gene-segment"></div>
  <div class="gene-segment"></div>
  <div class="gene-segment"></div>
  <div class="gene-segment"></div>
</div>

.gene-container {
  width: 80px;
  height: 300px;
  overflow: hidden;
}

.gene-segment {
  width: 100%;
  height: 20%;
  background: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #3498db 10px, #3498db 20px);
  animation: rotate 2s linear infinite;
}

/* 给每个片段设置递增延迟，实现从下往上依次旋转 */
.gene-segment:nth-child(1) { animation-delay: 0s; }
.gene-segment:nth-child(2) { animation-delay: 0.2s; }
.gene-segment:nth-child(3) { animation-delay: 0.4s; }
.gene-segment:nth-child(4) { animation-delay: 0.6s; }
.gene-segment:nth-child(5) { animation-delay: 0.8s; }

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

思路3：CSS变量+裁剪路径控制进度 #

• 核心逻辑：用CSS变量存储旋转覆盖进度，通过动画更新变量值，结合clip-path裁剪元素，让旋转效果从下往上逐步覆盖整个元素
• 实现步骤：
  1. 给元素定义--progress变量，初始值为0
  2. 编写关键帧动画，让--progress从0递增到100%
  3. 用clip-path: inset(calc(var(--progress) * 1%) 0 0 0)裁剪元素，只显示从下往上的部分，同时给显示区域应用旋转
• 代码示例：

<div class="gene-progress"></div>

.gene-progress {
  width: 80px;
  height: 300px;
  background: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #3498db 10px, #3498db 20px);
  --progress: 0;
  /* 裁剪出从下往上的显示区域 */
  clip-path: inset(calc(var(--progress) * 1%) 0 0 0);
  /* 对显示区域应用旋转 */
  transform: rotate(calc(var(--progress) * 3.6deg));
  animation: progressRotate 3s ease-in-out infinite;
}

@keyframes progressRotate {
  0% { 
    --progress: 0;
  }
  100% { 
    --progress: 100;
  }
}

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