CSS运行路径动画
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
display: grid;
place-content: center;
}
.o {
grid-area: 1/1/-1/-1;
width: 0.5px;
height: 0.5px;
}
.o .x {
width: var(--w);
height: 1px;
background: linear-gradient(to right, var(--c0), var(--c1));
offset-path: path('\
M0 0 C0 -100 200 -100 100 0\
C100 100 0 100 0 0\
C0 -100 -200 -100 -100 0\
C-100 100 0 100 0 0');
offset-anchor: 50% 50%;
-webkit-animation: anInset 4s infinite var(--delay) ease-in-out;
animation: anInset 4s infinite var(--delay) ease-in-out;
}
@-webkit-keyframes anInset {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
@keyframes anInset {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
</style>
</head>
<body translate="no">
<div class="o" style="--w:20.8px;--c0:hsla(3.6, 50%, 50%, 90%);--c1:transparent;--delay:0.02s;">
<div class="x"></div>
</div>
<div class="o" style="--w:21.6px;--c0:hsla(7.2, 50%, 50%, 90%);--c1:transparent;--delay:0.04s;">
<div class="x"></div>
</div>
<div class="o" style="--w:22.4px;--c0:hsla(10.8, 50%, 50%, 90%);--c1:transparent;--delay:0.06s;">
<div class="x"></div>
</div>
<div class="o" style="--w:23.2px;--c0:hsla(14.4, 50%, 50%, 90%);--c1:transparent;--delay:0.08s;">
<div class="x"></div>
</div>
<div class="o" style="--w:24px;--c0:hsla(18, 50%, 50%, 90%);--c1:transparent;--delay:0.1s;">
<div class="x"></div>
</div>
<div class="o" style="--w:24.8px;--c0:hsla(21.6, 50%, 50%, 90%);--c1:transparent;--delay:0.12s;">
<div class="x"></div>
</div>
<div class="o" style="--w:25.6px;--c0:hsla(25.2, 50%, 50%, 90%);--c1:transparent;--delay:0.14s;">
<div class="x"></div>
</div>
<div class="o" style="--w:26.4px;--c0:hsla(28.8, 50%, 50%, 90%);--c1:transparent;--delay:0.16s;">
<div class="x"></div>
</div>
<div class="o" style="--w:27.2px;--c0:hsla(32.4, 50%, 50%, 90%);--c1:transparent;--delay:0.18s;">
<div class="x"></div>
</div>
<div class="o" style="--w:28px;--c0:hsla(36, 50%, 50%, 90%);--c1:transparent;--delay:0.2s;">
<div class="x"></div>
</div>
<div class="o" style="--w:28.8px;--c0:hsla(39.6, 50%, 50%, 90%);--c1:transparent;--delay:0.22s;">
<div class="x"></div>
</div>
<div class="o" style="--w:29.6px;--c0:hsla(43.2, 50%, 50%, 90%);--c1:transparent;--delay:0.24s;">
<div class="x"></div>
</div>
<div class="o" style="--w:30.4px;--c0:hsla(46.8, 50%, 50%, 90%);--c1:transparent;--delay:0.26s;">
<div class="x"></div>
</div>
<div class="o" style="--w:31.2px;--c0:hsla(50.4, 50%, 50%, 90%);--c1:transparent;--delay:0.28s;">
<div class="x"></div>
</div>
<div class="o" style="--w:32px;--c0:hsla(54, 50%, 50%, 90%);--c1:transparent;--delay:0.3s;">
<div class="x"></div>
</div>
<div class="o" style="--w:32.8px;--c0:hsla(57.6, 50%, 50%, 90%);--c1:transparent;--delay:0.32s;">
<div class="x"></div>
</div>
<div class="o" style="--w:33.6px;--c0:hsla(61.2, 50%, 50%, 90%);--c1:transparent;--delay:0.34s;">
<div class="x"></div>
</div>
<div class="o" style="--w:34.4px;--c0:hsla(64.8, 50%, 50%, 90%);--c1:transparent;--delay:0.36s;">
<div class="x"></div>
</div>
<div class="o" style="--w:35.2px;--c0:hsla(68.4, 50%, 50%, 90%);--c1:transparent;--delay:0.38s;">
<div class="x"></div>
</div>
<div class="o" style="--w:36px;--c0:hsla(72, 50%, 50%, 90%);--c1:transparent;--delay:0.4s;">
<div class="x"></div>
</div>
<div class="o" style="--w:36.8px;--c0:hsla(75.6, 50%, 50%, 90%);--c1:transparent;--delay:0.42s;">
<div class="x"></div>
</div>
<div class="o" style="--w:37.6px;--c0:hsla(79.2, 50%, 50%, 90%);--c1:transparent;--delay:0.44s;">
<div class="x"></div>
</div>
<div class="o" style="--w:38.4px;--c0:hsla(82.8, 50%, 50%, 90%);--c1:transparent;--delay:0.46s;">
<div class="x"></div>
</div>
<div class="o" style="--w:39.2px;--c0:hsla(86.4, 50%, 50%, 90%);--c1:transparent;--delay:0.48s;">
<div class="x"></div>
</div>
<div class="o" style="--w:40px;--c0:hsla(90, 50%, 50%, 90%);--c1:transparent;--delay:0.5s;">
<div class="x"></div>
</div>
<div class="o" style="--w:40.8px;--c0:hsla(93.6, 50%, 50%, 90%);--c1:transparent;--delay:0.52s;">
<div class="x"></div>
</div>
<div class="o" style="--w:41.6px;--c0:hsla(97.2, 50%, 50%, 90%);--c1:transparent;--delay:0.54s;">
<div class="x"></div>
</div>
<div class="o" style="--w:42.4px;--c0:hsla(100.8, 50%, 50%, 90%);--c1:transparent;--delay:0.56s;">
<div class="x"></div>
</div>
<div class="o" style="--w:43.2px;--c0:hsla(104.4, 50%, 50%, 90%);--c1:transparent;--delay:0.58s;">
<div class="x"></div>
</div>
<div class="o" style="--w:44px;--c0:hsla(108, 50%, 50%, 90%);--c1:transparent;--delay:0.6s;">
<div class="x"></div>
</div>
<div class="o" style="--w:44.8px;--c0:hsla(111.6, 50%, 50%, 90%);--c1:transparent;--delay:0.62s;">
<div class="x"></div>
</div>
<div class="o" style="--w:45.6px;--c0:hsla(115.2, 50%, 50%, 90%);--c1:transparent;--delay:0.64s;">
<div class="x"></div>
</div>
<div class="o" style="--w:46.4px;--c0:hsla(118.8, 50%, 50%, 90%);--c1:transparent;--delay:0.66s;">
<div class="x"></div>
</div>
<div class="o" style="--w:47.2px;--c0:hsla(122.4, 50%, 50%, 90%);--c1:transparent;--delay:0.68s;">
<div class="x"></div>
</div>
<div class="o" style="--w:48px;--c0:hsla(126, 50%, 50%, 90%);--c1:transparent;--delay:0.7s;">
<div class="x"></div>
</div>
<div class="o" style="--w:48.8px;--c0:hsla(129.6, 50%, 50%, 90%);--c1:transparent;--delay:0.72s;">
<div class="x"></div>
</div>
<div class="o" style="--w:49.6px;--c0:hsla(133.2, 50%, 50%, 90%);--c1:transparent;--delay:0.74s;">
<div class="x"></div>
</div>
<div class="o" style="--w:50.4px;--c0:hsla(136.8, 50%, 50%, 90%);--c1:transparent;--delay:0.76s;">
<div class="x"></div>
</div>
<div class="o" style="--w:51.2px;--c0:hsla(140.4, 50%, 50%, 90%);--c1:transparent;--delay:0.78s;">
<div class="x"></div>
</div>
<div class="o" style="--w:52px;--c0:hsla(144, 50%, 50%, 90%);--c1:transparent;--delay:0.8s;">
<div class="x"></div>
</div>
<div class="o" style="--w:52.8px;--c0:hsla(147.6, 50%, 50%, 90%);--c1:transparent;--delay:0.82s;">
<div class="x"></div>
</div>
<div class="o" style="--w:53.6px;--c0:hsla(151.2, 50%, 50%, 90%);--c1:transparent;--delay:0.84s;">
<div class="x"></div>
</div>
<div class="o" style="--w:54.4px;--c0:hsla(154.8, 50%, 50%, 90%);--c1:transparent;--delay:0.86s;">
<div class="x"></div>
</div>
<div class="o" style="--w:55.2px;--c0:hsla(158.4, 50%, 50%, 90%);--c1:transparent;--delay:0.88s;">
<div class="x"></div>
</div>
<div class="o" style="--w:56px;--c0:hsla(162, 50%, 50%, 90%);--c1:transparent;--delay:0.9s;">
<div class="x"></div>
</div>
<div class="o" style="--w:56.8px;--c0:hsla(165.6, 50%, 50%, 90%);--c1:transparent;--delay:0.92s;">
<div class="x"></div>
</div>
<div class="o" style="--w:57.6px;--c0:hsla(169.2, 50%, 50%, 90%);--c1:transparent;--delay:0.94s;">
<div class="x"></div>
</div>
<div class="o" style="--w:58.4px;--c0:hsla(172..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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