div+css实现圆柱螺旋你追我赶动画效果代码
代码语言：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 class="item" style="--i:20;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:21;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:22;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:23;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:24;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:25;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:26;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:27;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:28;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:29;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:30;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:31;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:32;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:33;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:34;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:35;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:36;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:37;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:38;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:39;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:40;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:41;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:42;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:43;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:44;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:45;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:46;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:47;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:48;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:49;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:50;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:51;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:52;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:53;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:54;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:55;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:56;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:57;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:58;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:59;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:60;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:61;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:62;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:63;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:64;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:65;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:66;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:67;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:68;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:69;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:70;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:71;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:72;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:73;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:74;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:75;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:76;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:77;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:78;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:79;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:80;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:81;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:82;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:83;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:84;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:85;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:86;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:87;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:88;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:89;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:90;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:91;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:92;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:93;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:94;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:95;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:96;">
<div>(..⏝⦿⏝..)</div>
<div>(.⏜o⏜.)</div>
</div>
<div class="item" style="--i:97;">
<div>(..⏝⦿⏝..)</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