div+css实现炫酷三维文字运动拖影动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现炫酷三维文字运动拖影动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
  
<style>
:root {
  --distance: max(120rem, 50dvw);
  --rotation-duration: 3s;
  --fade-in-duration: 0.2s;
  --delay-base: 0.012s;
}

@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 right, transparent 0%, black 30%);
          mask: linear-gradient(to right, transparent 0%, black 30%);
  font-size: 6rem;
  position: relative;
  display: grid;
  place-items: center;
}

.item {
  line-height: 80%;
  position: absolute;
  --x: calc(var(--distance) / var(--count));
  transform: translate3d(calc(var(--i) * var(--x) - var(--distance)), 0%, 0) rotate(var(--r));
  --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:last-of-type {
  filter: drop-shadow(0 0 0.6rem rgba(255, 255, 255, 0.6));
}
.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%, #7ec915, #ebf41a, #fdbb14, #ff4e37, #ff52e7, white, #11d3ff, #7ec915);
}
.item > div:last-of-type {
  background: conic-gradient(from 290deg at 50% 0%, #7ec915, #ebf41a, #fdbb14, #ff4e37, #ff52e7, white, #11d3ff, #7ec915);
}

@-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: #0e28ad;
  position: relative;
}
</style>



  
  
</head>

<body translate="no">
  <div class="items" style="--count:400;">
  <div class="item" style="--i:0;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:1;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:2;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:3;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:4;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:5;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:6;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:7;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:8;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:9;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:10;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:11;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:12;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:13;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:14;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:15;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:16;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:17;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:18;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:19;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:20;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:21;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:22;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:23;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:24;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:25;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:26;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:27;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:28;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:29;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:30;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:31;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:32;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:33;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:34;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:35;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:36;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:37;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:38;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:39;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:40;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:41;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:42;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:43;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:44;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:45;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:46;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:47;">
    <div>CSS</div>
    <div>✨</div>
  </div>
  <div class="item" style="--i:48;">
 .........完整代码请登录后点击上方下载按钮下载查看