div+css实现炫酷三维文字运动拖影动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现炫酷三维文字运动拖影动画效果代码
代码标签： 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;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:49;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:50;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:51;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:52;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:53;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:54;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:55;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:56;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:57;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:58;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:59;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:60;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:61;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:62;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:63;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:64;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:65;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:66;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:67;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:68;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:69;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:70;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:71;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:72;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:73;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:74;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:75;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:76;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:77;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:78;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:79;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:80;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:81;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:82;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:83;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:84;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:85;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:86;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:87;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:88;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:89;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:90;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:91;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:92;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:93;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:94;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:95;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:96;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:97;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:98;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:99;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:100;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:101;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:102;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:103;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:104;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:105;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:106;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:107;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:108;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:109;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:110;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:111;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:112;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:113;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:114;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:115;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:116;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:117;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:118;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:119;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:120;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:121;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:122;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:123;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:124;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:125;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:126;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:127;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:128;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:129;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:130;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:131;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:132;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:133;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:134;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:135;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:136;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:137;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:138;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:139;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:140;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:141;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:142;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:143;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:144;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:145;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:146;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:147;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:148;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:149;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:150;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:151;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:152;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:153;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:154;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:155;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:156;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:157;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:158;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:159;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:160;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:161;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:162;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:163;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:164;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:165;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:166;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:167;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:168;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:169;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:170;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:171;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:172;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:173;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:174;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:175;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:176;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:177;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:178;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:179;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:180;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:181;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:182;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:183;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:184;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:185;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:186;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:187;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:188;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:189;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:190;">
<div>CSS</div>
<div>✨</div>
</div>
<div class="item" style="--i:191;">
<div>CSS</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0