div+css实现文字流线光影动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现文字流线光影动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,900&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.css {
  position: relative;
  filter: contrast(5);
  width: 68em;
  height: 40em;
  background-color: #000;
  margin-bottom: -9em;
}

.c, .s {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c:nth-child(1), .s:nth-child(1) {
  left: calc(50% + -14em);
  --tos: 0s;
}
.c:nth-child(2), .s:nth-child(2) {
  left: calc(50% + 0em);
  --tos: 1.8s;
}
.c:nth-child(3), .s:nth-child(3) {
  left: calc(50% + 14em);
  --tos: 3.6s;
}
.c > div, .s > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 3em;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(0.5em);
}

.c > div {
  -webkit-animation: CballOpacity 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1), CballTop 6s calc(var(--ad) - 4.5s) infinite cubic-bezier(0.4, 0, 0.6, 1), CballLeft 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1);
          animation: CballOpacity 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1), CballTop 6s calc(var(--ad) - 4.5s) infinite cubic-bezier(0.4, 0, 0.6, 1), CballLeft 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.c > div:nth-child(1) {
  background-color: #e87d7d;
  --ad: calc(var(--tos) + 0s);
}
.c > div:nth-child(2) {
  background-color: #e8827d;
  --ad: calc(var(--tos) + 0.05s);
}
.c > div:nth-child(3) {
  background-color: #e8887d;
  --ad: calc(var(--tos) + 0.1s);
}
.c > div:nth-child(4) {
  background-color: #e88d7d;
  --ad: calc(var(--tos) + 0.15s);
}
.c > div:nth-child(5) {
  background-color: #e8927d;
  --ad: calc(var(--tos) + 0.2s);
}
.c > div:nth-child(6) {
  background-color: #e8987d;
  --ad: calc(var(--tos) + 0.25s);
}
.c > div:nth-child(7) {
  background-color: #e89d7d;
  --ad: calc(var(--tos) + 0.3s);
}
.c > div:nth-child(8) {
  background-color: #e8a27d;
  --ad: calc(var(--tos) + 0.35s);
}
.c > div:nth-child(9) {
  background-color: #e8a87d;
  --ad: calc(var(--tos) + 0.4s);
}
.c > div:nth-child(10) {
  background-color: #e8ad7d;
  --ad: calc(var(--tos) + 0.45s);
}
.c > div:nth-child(11) {
  background-color: #e8b37d;
  --ad: calc(var(--tos) + 0.5s);
}
.c > div:nth-child(12) {
  background-color: #e8b87d;
  --ad: calc(var(--tos) + 0.55s);
}
.c > div:nth-child(13) {
  background-color: #e8bd7d;
  --ad: calc(var(--tos) + 0.6s);
}
.c > div:nth-child(14) {
  background-color: #e8c37d;
  --ad: calc(var(--tos) + 0.65s);
}
.c > div:nth-child(15) {
  background-color: #e8c87d;
  --ad: calc(var(--tos) + 0.7s);
}
.c > div:nth-child(16) {
  background-color: #e8cd7d;
  --ad: calc(var(--tos) + 0.75s);
}
.c > div:nth-child(17) {
  background-color: #e8d37d;
  --ad: calc(var(--tos) + 0.8s);
}
.c > div:nth-child(18) {
  background-color: #e8d87d;
  --ad: calc(var(--tos) + 0.85s);
}
.c > div:nth-child(19) {
  background-color: #e8dd7d;
  --ad: calc(var(--tos) + 0.9s);
}
.c > div:nth-child(20) {
  background-color: #e8e37d;
  --ad: calc(var(--tos) + 0.95s);
}
.c > div:nth-child(21) {
  background-color: #e8e87d;
  --ad: calc(var(--tos) + 1s);
}
.c > div:nth-child(22) {
  background-color: #e3e87d;
  --ad: calc(var(--tos) + 1.05s);
}
.c > div:nth-child(23) {
  background-color: #dde87d;
  --ad: calc(var(--tos) + 1.1s);
}
.c > div:nth-child(24) {
  background-color: #d8e87d;
  --ad: calc(var(--tos) + 1.15s);
}
.c > div:nth-child(25) {
  background-color: #d3e87d;
  --ad: calc(var(--tos) + 1.2s);
}
.c > div:nth-child(26) {
  background-color: #cde87d;
  --ad: calc(var(--tos) + 1.25s);
}
.c > div:nth-child(27) {
  background-color: #c8e87d;
  --ad: calc(var(--tos) + 1.3s);
}
.c > div:nth-child(28) {
  background-color: #c3e87d;
  --ad: calc(var(--tos) + 1.35s);
}
.c > div:nth-child(29) {
  background-color: #bde87d;
  --ad: calc(var(--tos) + 1.4s);
}
.c > div:nth-child(30) {
  background-color: #b8e87d;
  --ad: calc(var(--tos) + 1.45s);
}
.c > div:nth-child(31) {
  background-color: #b3e87d;
  --ad: calc(var(--tos) + 1.5s);
}
.c > div:nth-child(32) {
  background-color: #ade87d;
  --ad: calc(var(--tos) + 1.55s);
}
.c > div:nth-child(33) {
  background-color: #a8e87d;
  --ad: calc(var(--tos) + 1.6s);
}
.c > div:nth-child(34) {
  background-color: #a2e87d;
  --ad: calc(var(--tos) + 1.65s);
}
.c > div:nth-child(35) {
  background-color: #9de87d;
  --ad: calc(var(--tos) + 1.7s);
}
.c > div:nth-child(36) {
  background-color: #98e87d;
  --ad: calc(var(--tos) + 1.75s);
}
.c > div:nth-child(37) {
  background-color: #92e87d;
  --ad: calc(var(--tos) + 1.8s);
}
.c > div:nth-child(38) {
  background-color: #8de87d;
  --ad: calc(var(--tos) + 1.85s);
}
.c > div:nth-child(39) {
  background-color: #88e87d;
  --ad: calc(var(--tos) + 1.9s);
}
.c > div:nth-child(40) {
  background-color: #82e87d;
  --ad: calc(var(--tos) + 1.95s);
}
.c > div:nth-child(41) {
  background-color: #7de87d;
  --ad: calc(var(--tos) + 2s);
}
.c > div:nth-child(42) {
  background-color: #7de882;
  --ad: calc(var(--tos) + 2.05s);
}
.c > div:nth-child(43) {
  background-color: #7de888;
  --ad: calc(var(--tos) + 2.1s);
}
.c > div:nth-child(44) {
  background-color: #7de88d;
  --ad: calc(var(--tos) + 2.15s);
}
.c > div:nth-child(45) {
  background-color: #7de892;
  --ad: calc(var(--tos) + 2.2s);
}
.c > div:nth-child(46) {
  background-color: #7de898;
  --ad: calc(var(--tos) + 2.25s);
}
.c > div:nth-child(47) {
  background-color: #7de89d;
  --ad: calc(var(--tos) + 2.3s);
}
.c > div:nth-child(48) {
  background-color: #7de8a2;
  --ad: calc(var(--tos) + 2.35s);
}
.c > div:nth-child(49) {
  ba.........完整代码请登录后点击上方下载按钮下载查看