div+css实现圆柱螺旋你追我赶动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现圆柱螺旋你追我赶动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --distance: 100vh;
  --rotation-duration: 3s;
  --fade-in-duration: 0.2s;
  --delay-base: 0.018s;
}

@property --r {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
@property --l {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
@property --distance {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
.items {
  width: 100dvw;
  height: 100dvh;
  -webkit-mask: linear-gradient(to bottom, transparent 10%, black 40%, black 0%, transparent 90%);
          mask: linear-gradient(to bottom, transparent 10%, black 40%, black 0%, transparent 90%);
  font-size: 6rem;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item {
  line-height: 80%;
  position: absolute;
  --x: calc(var(--distance) / var(--count));
  transform: translate3d(0, calc(var(--i) * -1 * var(--x) + var(--distance) / 1.1), 0) rotate(var(--r)) scale(calc((var(--i)) * 0.005 + .09));
  --delay: calc((var(--count) - var(--i)) * var(--delay-base));
  -webkit-animation: rotation var(--rotation-duration) var(--delay) linear infinite, fade-in var(--fade-in-duration) var(--delay) linear forwards;
          animation: rotation var(--rotation-duration) var(--delay) linear infinite, fade-in var(--fade-in-duration) var(--delay) linear forwards;
  opacity: 0;
}
.item:not(:last-of-type) {
  filter: blur(0.1rem);
  color: black !important;
}
.item > div {
  text-align: center;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.item > div:first-of-type {
  letter-spacing: -0.5rem;
  background: conic-gradient(from 290deg at 50% 100%, #ececec, #c9c9c9, #9e9e9e, #636363, #d8d8d8, #ffffff, #9a9a9a, #e8e8e8);
}
.item > div:last-of-type {
  background: conic-gradient(from 290deg at 50% 0%, #ececec, #c9c9c9, #9e9e9e, #636363, #d8d8d8, #ffffff, #9a9a9a, #e8e8e8);
}

@-webkit-keyframes rotation {
  from {
    --r: 0deg;
  }
  to {
    --r: -360deg;
  }
}

@keyframes rotation {
  from {
    --r: 0deg;
  }
  to {
    --r: -360deg;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  display: grid;
  color: #ffbaf6;
  place-items: center;
  height: 100dvh;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
  background: #f2f2f2;
  position: relative;
}
</style>


  
  
</head>

<body translate="no">
  <div class="items" style="--count:200;">
  <div class="item" style="--i:0;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:1;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:2;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:3;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:4;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:5;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:6;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:7;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:8;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:9;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:10;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:11;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:12;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:13;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:14;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:15;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:16;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:17;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:18;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div class="item" style="--i:19;">
    <div>(..⏝⦿⏝..)</div>
    <div>(.⏜o⏜.)</div>
  </div>
  <div c.........完整代码请登录后点击上方下载按钮下载查看