纯css立体线体运动动画效果
代码语言：html
所属分类：三维
代码描述：纯css立体线体运动动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
body {
margin: 0;
height: 100vh;
perspective: 29em;
background: #000;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.a3d {
top: 50%;
left: 50%;
transform: rotatey(0deg);
animation: r 5s linear infinite;
}
@keyframes r {
to {
transform: rotatey(1turn);
}
}
.star {
transform: translate3d(var(--v));
}
.star:after {
position: absolute;
animation: r 5s linear infinite reverse, f 2.5s ease-in calc(var(--i)*var(--p)/var(--n)*-5s) infinite alternate;
color: hsl(calc(var(--i)*var(--p)*360/var(--n)), 85%, 65%);
font-weight: 900;
text-shadow: 0 0 3px currentcolor;
content: "🟄";
}
@keyframes f {
to {
opacity: 0;
}
}
</style>
</head>
<body translate="no">
<div class="a3d" style="--n: 360; --p: 3">
<div class="star" style="--i: 0; --v: 30vmin, 0vmin, 0vmin"></div>
<div class="star" style="--i: 1; --v: 29.88vmin, 1.57vmin, -1.22vmin"></div>
<div class="star" style="--i: 2; --v: 29.54vmin, 3.1vmin, -2.42vmin"></div>
<div class="star" style="--i: 3; --v: 28.97vmin, 4.59vmin, -3.58vmin"></div>
<div class="star" style="--i: 4; --v: 28.2vmin, 5.99vmin, -4.69vmin"></div>
<div class="star" style="--i: 5; --v: 27.23vmin, 7.3vmin, -5.74vmin"></div>
<div class="star" style="--i: 6; --v: 26.09vmin, 8.48vmin, -6.69vmin"></div>
<div class="star" style="--i: 7; --v: 24.8vmin, 9.52vmin, -7.55vmin"></div>
<div class="star" style="--i: 8; --v: 23.38vmin, 10.41vmin, -8.29vmin"></div>
<div class="star" style="--i: 9; --v: 21.87vmin, 11.14vmin, -8.91vmin"></div>
<div class="star" style="--i: 10; --v: 20.28vmin, 11.71vmin, -9.4vmin"></div>
<div class="star" style="--i: 11; --v: 18.66vmin, 12.12vmin, -9.74vmin"></div>
<div class="star" style="--i: 12; --v: 17.03vmin, 12.37vmin, -9.95vmin"></div>
<div class="star" style="--i: 13; --v: 15.41vmin, 12.48vmin, -10vmin"></div>
<div class="star" style="--i: 14; --v: 13.83vmin, 12.45vmin, -9.9vmin"></div>
<div class="star" style="--i: 15; --v: 12.31vmin, 12.31vmin, -9.66vmin"></div>
<div class="star" style="--i: 16; --v: 10.88vmin, 12.08vmin, -9.27vmin"></div>
<div class="star" style="--i: 17; --v: 9.54vmin, 11.78vmin, -8.75vmin"></div>
<div class="star" style="--i: 18; --v: 8.3vmin, 11.43vmin, -8.09vmin"></div>
<div class="star" style="--i: 19; --v: 7.18vmin, 11.05vmin, -7.31vmin"></div>
<div class="star" style="--i: 20; --v: 6.17vmin, 10.69vmin, -6.43vmin"></div>
<div class="star" style="--i: 21; --v: 5.27vmin, 10.35vmin, -5.45vmin"></div>
<div class="star" style="--i: 22; --v: 4.48vmin, 10.06vmin, -4.38vmin"></div>
<div class="star" style="--i: 23; --v: 3.78vmin, 9.84vmin, -3.26vmin"></div>
<div class="star" style="--i: 24; --v: 3.16vmin, 9.72vmin, -2.08vmin"></div>
<div class="star" style="--i: 25; --v: 2.6vmin, 9.7vmin, -0.87vmin"></div>
<div class="star" style="--i: 26; --v: 2.08vmin, 9.79vmin, 0.35vmin"></div>
<div class="star" style="--i: 27; --v: 1.58vmin, 10vmin, 1.56vmin"></div>
<div class="star" style="--i: 28; --v: 1.09vmin, 10.33vmin, 2.76vmin"></div>
<div class="star" style="--i: 29; --v: 0.56vmin, 10.78vmin, 3.91vmin"></div>
<div class="star" style="--i: 30; --v: 0vmin, 11.34vmin, 5vmin"></div>
<div class="star" style="--i: 31; --v: -0.63vmin, 12vmin, 6.02vmin"></div>
<div class="star" style="--i: 32; --v: -1.34vmin, 12.74vmin, 6.95vmin"></div>
<div class="star" style="--i: 33; --v: -2.14vmin, 13.54vmin, 7.77vmin"></div>
<div class="star" style="--i: 34; --v: -3.06vmin, 14.38vmin, 8.48vmin"></div>
<div class="star" style="--i: 35; --v: -4.08vmin, 15.24vmin, 9.06vmin"></div>
<div class="star" style="--i: 36; --v: -5.23vmin, 16.08vmin, 9.51vmin"></div>
<div class="star" style="--i: 37; --v: -6.48vmin, 16.89vmin, 9.82vmin"></div>
<div class="star" style="--i: 38; --v: -7.85vmin, 17.63vmin, 9.98vmin"></div>
<div class="star" style="--i: 39; --v: -9.32vmin, 18.29vmin, 9.99vmin"></div>
<div class="star" style="--i: 40; --v: -10.87vmin, 18.82vmin, 9.85vmin"></div>
<div class="star" style="--i: 41; --v: -12.49vmin, 19.23vmin, 9.56vmin"></div>
<div class="star" style="--i: 42; --v: -14.15vmin, 19.47vmin, 9.14vmin"></div>
<div class="star" style="--i: 43; --v: -15.83vmin, 19.55vmin, 8.57vmin"></div>
<div class="star" style="--i: 44; --v: -17.5vmin, 19.44vmin, 7.88vmin"></div>
<div class="star" style="--i: 45; --v: -19.14vmin, 19.14vmin, 7.07vmin"></div>
<div class="star" style="--i: 46; --v: -20.72vmin, 18.66vmin, 6.16vmin"></div>
<div class="star" style="--i: 47; --v: -22.2vmin, 17.98vmin, 5.15vmin"></div>
<div class="star" style="--i: 48; --v: -23.57vmin, 17.13vmin, 4.07vmin"></div>
<div class="star" style="--i: 49; --v: -24.79vmin, 16.1vmin, 2.92vmin"></div>
<div class="star" style="--i: 50; --v: -25.85vmin, 14.92vmin, 1.74vmin"></div>
<div class="star" style="--i: 51; --v: -26.72vmin, 13.61vmin, 0.52vmin"></div>
<div class="star" style="--i: 52; --v: -27.38vmin, 12.19vmin, -0.7vmin"></div>
<div class="star" style="--i: 53; --v: -27.84vmin, 10.69vmin, -1.91vmin"></div>
<div class="star" style="--i: 54; --v: -28.07vmin, 9.12vmin, -3.09vmin"></div>
<div class="star" style="--i: 55; --v: -28.07vmin, 7.52vmin, -4.23vmin"></div>
<div class="star" style="--i: 56; --v: -27.86vmin, 5.92vmin, -5.3vmin"></div>
<div class="star" style="--i: 57; --v: -27.43vmin, 4.34vmin, -6.29vmin"></div>
<div class="star" style="--i: 58; --v: -26.8vmin, 2.82vmin, -7.19vmin"></div>
<div class="star" style="--i: 59; --v: -25.98vmin, 1.36vmin, -7.99vmin"></div>
<div class="star" style="--i: 60; --v: -25vmin, 0vmin, -8.66vmin"></div>
<div class="star" style="--i: 61; --v: -23.87vmin, -1.25vmin, -9.21vmin"></div>
<div class="star" style="--i: 62; --v: -22.63vmin, -2.38vmin, -9.61vmin"></div>
<div class="star" style="--i: 63; --v: -21.3vmin, -3.37vmin, -9.88vmin"></div>
<div class="star" style="--i: 64; --v: -19.9vmin, -4.23vmin, -9.99vmin"></div>
<div class="star" style="--i: 65; --v: -18.48vmin, -4.95vmin, -9.96vmin"></div>
<div class="star" style="--i: 66; --v: -17.04vmin, -5.54vmin, -9.78vmin"></div>
<div class="star" style="--i: 67; --v: -15.63vmin, -6vmin, -9.46vmin"></div>
<div class="star" style="--i: 68; --v: -14.27vmin, -6.35vmin, -8.99vmin"></div>
<div class="star" style="--i: 69; --v: -12.97vmin, -6.61vmin, -8.39vmin"></div>
<div class="star" style="--i: 70; --v: -11.75vmin, -6.79vmin, -7.66vmin"></div>
<div class="star" style="--i: 71; --v: -10.64vmin, -6.91vmin, -6.82vmin"></div>
<div class="star" style="--i: 72; --v: -9.64vmin, -7vmin, -5.88vmin"></div>
<div class="star" style="--i: 73; --v: -8.75vmin, -7.08vmin, -4.85vmin"></div>
<div class="star" style="--i: 74; --v: -7.97vmin, -7.18vmin, -3.75vmin"></div>
<div class="star" style="--i: 75; --v: -7.31vmin, -7.31vmin, -2.59vmin"></div>
<div class="star" style="--i: 76; --v: -6.76vmin, -7.5vmin, -1.39vmin"></div>
<div class="star" style="--i: 77; --v: -6.29vmin, -7.77vmin, -0.17vmin"></div>
<div class="star" style="--i: 78; --v: -5.91vmin, -8.13vmin, 1.05vmin"></div>
<div class="star" style="--i: 79; --v: -5.59vmin, -8.6vmin, 2.25vmin"></div>
<div class="star" style="--i: 80; --v: -5.3vmin, -9.18vmin, 3.42vmin"></div>
<div class="star" style="--i: 81; --v: -5.03vmin, -9.88vmin, 4.54vmin"></div>
<div class="star" style="--i: 82; --v: -4.76vmin, -10.7vmin, 5.59vmin"></div>
<div class="star" style="--i: 83; --v: -4.46vmin, -11.63vmin, 6.56vmin"></div>
<div class="star" style="--i: 84; --v: -4.11vmin, -12.66vmin, 7.43vmin"></div>
<div class="star" style="--i: 85; --v: -3.69vmin, -13.78vmin, 8.19vmin"></div>
<div class="star" style="--i: 86; --v: -3.18vmin, -14.97vmin, 8.83vmin"></div>
<div class="star" style="--i: 87; --v: -2.57vmin, -16.21vmin, 9.34vmin"></div>
<div class="star" style="--i: 88; --v: -1.84vmin, -17.48vmin, 9.7vmin"></div>
<div class="star" style="--i: 89; --v: -0.98vmin, -18.76vmin, 9.93vmin"></div>
<div class="star" style="--i: 90; --v: 0vmin, -20vmin, 10vmin"></div>
<div class="star" style="--i: 91; --v: 1.11vmin, -21.19vmin, 9.93vmin"></div>
<div class="star" style="--i: 92; --v: 2.34vmin, -22.3vmin, 9.7vmin"></div>
<div class="star" style="--i: 93; --v: 3.69vmin, -23.29vmin, 9.34vmin"></div>
<div class="star" style="--i: 94; --v: 5.13vmin, -24.16vmin, 8.83vmin"></div>
<div class="star" style="--i: 95; --v: 6.66vmin, -24.86vmin, 8.19vmin"></div>
<div class="star" style="--i: 96; --v: 8.25vmin, -25.38vmin, 7.43vmin"></div>
<div class="star" style="--i: 97; --v: 9.87vmin, -25.72vmin, 6.56vmin"></div>
<div class="star" style="--i: 98; --v: 11.51vmin, -25.84vmin, 5.59vmin"></div>
<div class="star" style="--i: 99; --v: 13.12vmin, -25.76vmin, 4.54vmin"></div>
<div class="star" style="--i: 100; --v: 14.7vmin, -25.46vmin, 3.42vmin"></div>
<div class="star" style="--i: 101; --v: 16.2vmin, -24.95vmin, 2.25vmin"></div>
<div class="star" style="--i: 102; --v: 17.6vmin, -24.23vmin, 1.05vmin"></div>
<div class="star" style="--i: 103; --v: 18.88vmin, -23.31vmin, -0.17vmin"></div>
<div class="star" style="--i: 104; --v: 20.01vmin, -22.22vmin, -1.39vmin"></div>
<div class="star" style="--i: 105; --v: 20.97vmin, -20.97vmin, -2.59vmin"></div>
<div class="star" style="--i: 106; --v: 21.75vmin, -19.59vmin, -3.75vmin"></div>
<div class="star" style="--i: 107; --v: 22.34vmin, -18.09vmin, -4.85vmin"></div>
<div class="star" style="--i: 108; --v: 22.73vmin, -16.51vmin, -5.88vmin"></div>
<div class="star" style="--i: 109; --v: 22.91vmin, -14.88vmin, -6.82vmin"></div>
<div class="star" style="--i: 110; --v: 22.89vmin, -13.21vmin, -7.66vmin"></div>
<div class="star" style="--i: 111; --v: 22.67vmin, -11.55vmin, -8.39vmin"></div>
<div class="star" style="--i: 112; --v: 22.28vmin, -9.92vmin, -8.99vmin"></div>
<div class="star" style="--i: 113; --v: 21.71vmin, -8.33vmin, -9.46vmin"></div>
<div class="star" style="--i: 114; --v: 21vmin, -6.82vmin, -9.78vmin"></div>
<div class="star" style="--i: 115; --v: 20.16vmin, -5.4vmin, -9.96vmin"></div>
<div class="star" style="--i: 116; --v: 19.22vmin, -4.09vmin, -9.99vmin"></div>
<div class="star" style="--i: 117; --v: 18.21vmin, -2.88vmin, -9.88vmin"></div>
<div class="star" style="--i: 118; --v: 17.15vmin, -1.8vmin, -9.61vmin"></div>
<div class="star" style="--i: 119; --v: 16.07vmin, -0.84vmin, -9.21vmin"></div>
<div class="star" style="--i: 120; --v: 15vmin, 0vmin, -8.66vmin"></div>
<div class="star" style="--i: 121; --v: 13.96vmin, 0.73vmin, -7.99vmin"></div>
<div class="star" style="--i: 122; --v: 12.98vmin, 1.36vmin, -7.19vmin"></div>
<div class="star" style="--i: 123; --v: 12.08vmin, 1.91vmin, -6.29vmin"></div>
<div class="star" style="--i: 124; --v: 11.27vmin, 2.4vmin, -5.3vmin"></div>
<div class="star" style="--i: 125; --v: 10.56vmin, 2.83vmin, -4.23vmin"></div>
<div class="star" style="--i: 126; --v: 9.98vmin, 3.24vmin, -3.09vmin"></div>
<div class="star" style="--i: 127; --v: 9.51vmin, 3.65vmin, -1.91vmin"></div>
<div class="star" style="--i: 128; --v: 9.16vmin, 4.08vmin, -0.7vmin"></div>
<div class="star" style="--i: 129; --v: 8.92vmin, 4.55vmin, 0.52vmin"></div>
<div class="star" style="--i: 130; --v: 8.79vmin, 5.08vmin, 1.74vmin"></div>
<div class="star" style="--i: 131; --v: 8.75vmin, 5.68vmin, 2.92vmin"></div>
<div class="star" style="--i: 132; --v: 8.79vmin, 6.39vmin, 4.07vmin"></div>
<div class="star" style="--i: 133; --v: 8.88vmin, 7.19vmin, 5.15vmin"></div>
<div class="star" style="--i: 134; --v: 9.01vmin, 8.11vmin, 6.16vmin"></div>
<div class="star" style="--i: 135; --v: 9.14vmin, 9.14vmin, 7.07vmin"></div>
<div class="star" style="--i: 136; --v: 9.26vmin, 10.29vmin, 7.88vmin"></div>
<div class="star" style="--i: 137; --v: 9.35vmin, 11.54vmin, 8.57vmin"></div>
<div class="star" style="--i: 138; --v: 9.36vmin, 12.89vmin, 9.14vmin"></div>
<div class="star" style="--i: 139; --v: 9.3vmin, 14.32vmin, 9.56vmin"></div>
<div class="star" style="--i: 140; --v: 9.13vmin, 15.82vmin, 9.85vmin"></div>
<div class="star" style="--i: 141; --v: 8.84vmin, 17.35vmin, 9.99vmin"></div>
<div class="star" style="--i: 142; --v: 8.42vmin, 18.91vmin, 9.98vmin"></div>
<div class="star" style="--i: 143; --v: 7.85vmin, 20.45vmin, 9.82vmin"></div>
<div class="star" style="--i: 144; --v: 7.14vmin, 21.96vmin, 9.51vmin"></div>
<div class="star" style="--i: 145; --v: 6.27vmin, 23.4vmin, 9.06vmin"></div>
<div class="star" style="--i: 146; --v: 5.26vmin, 24.75vmin, 8.48vmin"></div>
<div class="star" style="--i: 147; --v: 4.11vmin, 25.97vmin, 7.77vmin"></div>
<div class="star" style="--i: 148; --v: 2.84vmin, 27.04vmin, 6.95vmin"></div>
<div class="star" style="--i: 149; --v: 1.46vmin, 27.95vmin, 6.02vmin"></div>
<div class="star" style="--i: 150; --v: 0vmin, 28.66vmin, 5vmin"></div>
<div class="star" style="--i: 151; --v: -1.53vmin, 29.17vmin, 3.91vmin"></div>
<div class="star" style="--i: 152; --v: -3.1vmin, 29.45vmin, 2.76vmin"></div>
<div class="star" style="--i: 153; --v: -4.67vmin, 29.51vmin, 1.56vmin"></div>
<div class="star" style="--i: 154; --v: -6.24vmin, 29.34vmin, 0.35vmin"></div>
<div class="star" style="--i: 155; --v: -7.75vmin, 28.94vmin, -0.87vmin"></div>
<div class="star" style="--i: 156; --v: -9.2vmin, 28.32vmin, -2.08vmin"></div>
<div class="star" style="--i: 157; --v: -10.56vmin, 27.5vmin, -3.26vmin"></div>
<div class="star" style="--i: 158; --v: -11.79vmin, 26.48vmin, -4.38vmin"></div>
<div class="star" style="--i: 159; --v: -12.89vmin, 25.29vmin, -5.45vmin"></div>
<div class="star" style="--i: 160; --v: -13.83vmin, 23.95vmin, -6.43vmin"></div>
<div class="star" style="--i: 161; --v: -14.61vmin, 22.49vmin, -7.31vmin"></div>
<div class="star" style="--i: 162; --v: -15.21vmin, 20.94vmin, -8.09vmin"></div>
<div class="star" style="--i: 163; --v: -15.64vmin, 19.31vmin, -8.75vmin"></div>
<div class="star" style="--i: 164; --v: -15.89vmin, 17.65vmin, -9.27vmin"></div>
<div class="star" style="--i: 165; --v: -15.97vmin, 15.97vmin, -9.66vmin"></div>
<div class="star" style="--i: 166; --v: -15.9vmin, 14.31vmin, -9.9vmin"></div>
<div class="star" style="--i: 167; --v: -15.68vmin, 12.7vmin, -10vmin"></div>
<div class="star" style="--i: 168; --v: -15.33vmin, 11.14vmin, -9.95vmin"></div>
<div class="star" style="--i: 169; --v: -14.89vmin, 9.67vmin, -9.74vmin"></div>
<div class="star" style="--i: 170; --v: -14.36vmin, 8.29vmin, -9.4vmin"></div>
<div class="star" style="--i: 171; --v: -13.78vmin, 7.02vmin, -8.91vmin"></div>
<div class="star" style="--i: 172; --v: -13.16vmin, 5.86vmin, -8.29vmin"></div>
<div class="star" style="--i: 173; --v: -12.55vmin, 4.82vmin, -7.55vmin"></div>
<div class="star" style="--i: 174; --v: -11.95vmin, 3.88vmin, -6.69vmin"></div>
<div class="star" style="--i: 175; --v: -11.41vmin, 3.06vmin, -5.74vmin"></div>
<div class="star" .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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