div+css实现彩色随机圆点缩放位移动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现彩色随机圆点缩放位移动画效果代码
代码标签： div css 彩色 随机 圆点 缩放 位移 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: hsl(200, 10%, 10%);
margin: 0;
}
ul {
aspect-ratio: 1;
container-type: inline-size;
padding: 0;
position: relative;
width: 100%;
}
li {
animation: move var(--t, 5s) calc(var(--d, 0) + 750ms) linear infinite alternate;
background: crimson;
border-radius: 50%;
height: 1cqi;
left: var(--x, 0);
list-style: none;
position: absolute;
top: var(--y, 0);
width: 1cqi;
}
@keyframes move {
100% {
background: var(--bg, crimson);
border-radius: var(--br, 50%);
height: var(--sz, 1cqi);
transform: translate(var(--mx,0), var(--my,0));
width: var(--sz, 1cqi);
}
}
</style>
</head>
<body translate="no">
<ul>
<li style="--bg:hsl(214.66, 75%, 50%);--mx:33.04cqi;--my:-4.6cqi;--d:1593.19ms;--t:15674.9ms;--x:10cqi;--y:10cqi;--sz:15.28cqi;"></li>
<li style="--bg:hsl(193.68, 75%, 50%);--mx:-4.5cqi;--my:46.1cqi;--d:1771.34ms;--t:17640.15ms;--x:16.153846153846153cqi;--y:10cqi;--sz:3.54cqi;"></li>
<li style="--bg:hsl(332.98, 75%, 50%);--mx:11.49cqi;--my:-12.35cqi;--d:1928.91ms;--t:12909.6ms;--x:22.307692307692307cqi;--y:10cqi;--sz:20.63cqi;"></li>
<li style="--bg:hsl(292.97, 75%, 50%);--mx:13.67cqi;--my:16.22cqi;--d:1074.43ms;--t:20824.2ms;--x:28.461538461538463cqi;--y:10cqi;--sz:22.45cqi;"></li>
<li style="--bg:hsl(114.1, 75%, 50%);--mx:14.3cqi;--my:21.89cqi;--d:944.3ms;--t:8866.68ms;--x:34.61538461538461cqi;--y:10cqi;--sz:23.98cqi;"></li>
<li style="--bg:hsl(256.69, 75%, 50%);--mx:3.27cqi;--my:47.75cqi;--d:1620.59ms;--t:7951.18ms;--x:40.769230769230774cqi;--y:10cqi;--sz:12.31cqi;"></li>
<li style="--bg:hsl(250.29, 75%, 50%);--mx:4.71cqi;--my:-3.73cqi;--d:950.74ms;--t:20676.82ms;--x:46.92307692307693cqi;--y:10cqi;--sz:6.07cqi;"></li>
<li style="--bg:hsl(182.29, 75%, 50%);--mx:3.72cqi;--my:12.3cqi;--d:666.47ms;--t:11726.92ms;--x:53.07692307692308cqi;--y:10cqi;--sz:20.67cqi;"></li>
<li style="--bg:hsl(358.11, 75%, 50%);--mx:44.21cqi;--my:25.73cqi;--d:1397.52ms;--t:19844.22ms;--x:59.23076923076923cqi;--y:10cqi;--sz:16.32cqi;"></li>
<li style="--bg:hsl(350.14, 75%, 50%);--mx:-18.99cqi;--my:18.68cqi;--d:175.02ms;--t:5448.27ms;--x:65.38461538461539cqi;--y:10cqi;--sz:3.43cqi;"></li>
<li style="--bg:hsl(169.33, 75%, 50%);--mx:-6.12cqi;--my:25.25cqi;--d:1220.42ms;--t:16846.85ms;--x:71.53846153846155cqi;--y:10cqi;--sz:20.52cqi;"></li>
<li style="--bg:hsl(37.75, 75%, 50%);--mx:38.13cqi;--my:5.83cqi;--d:1560.09ms;--t:7036ms;--x:77.6923076923077cqi;--y:10cqi;--sz:24.86cqi;"></li>
<li style="--bg:hsl(294.44, 75%, 50%);--mx:8.42cqi;--my:-9.61cqi;--d:1879.8ms;--t:6723.06ms;--x:83.84615384615385cqi;--y:10cqi;--sz:19.09cqi;"></li>
<li style="--bg:hsl(328.68, 75%, 50%);--mx:20.4cqi;--my:-24.31cqi;--d:817.87ms;--t:8684.22ms;--x:90cqi;--y:10cqi;--sz:12.16cqi;"></li>
<li style="--bg:hsl(322.06, 75%, 50%);--mx:37.54cqi;--my:-16.88cqi;--d:1969.84ms;--t:13559.87ms;--x:10cqi;--y:16.153846153846153cqi;--sz:19.39cqi;"></li>
<li style="--bg:hsl(340.01, 75%, 50%);--mx:-23.9cqi;--my:7.36cqi;--d:1582.18ms;--t:17377.19ms;--x:16.153846153846153cqi;--y:16.153846153846153cqi;--sz:24.27cqi;"></li>
<li style="--bg:hsl(2.46, 75%, 50%);--mx:-21.48cqi;--my:22.05cqi;--d:1147.93ms;--t:22107.09ms;--x:22.307692307692307cqi;--y:16.153846153846153cqi;--sz:6.1cqi;"></li>
<li style="--bg:hsl(79.07, 75%, 50%);--mx:18.54cqi;--my:31.95cqi;--d:1733.81ms;--t:22709.1ms;--x:28.461538461538463cqi;--y:16.153846153846153cqi;--sz:24.93cqi;"></li>
<li style="--bg:hsl(208.27, 75%, 50%);--mx:5.03cqi;--my:20.33cqi;--d:1697.78ms;--t:20114.17ms;--x:34.61538461538461cqi;--y:16.153846153846153cqi;--sz:19.22cqi;"></li>
<li style="--bg:hsl(59.24, 75%, 50%);--mx:4.77cqi;--my:15.47cqi;--d:1342.31ms;--t:12998.24ms;--x:40.769230769230774cqi;--y:16.153846153846153cqi;--sz:13.79cqi;"></li>
<li style="--bg:hsl(251.25, 75%, 50%);--mx:39.52cqi;--my:3.43cqi;--d:273.45ms;--t:14316.7ms;--x:46.92307692307693cqi;--y:16.153846153846153cqi;--sz:5.12cqi;"></li>
<li style="--bg:hsl(26.56, 75%, 50%);--mx:14.07cqi;--my:25.46cqi;--d:1517.13ms;--t:14501.47ms;--x:53.07692307692308cqi;--y:16.153846153846153cqi;--sz:18.31cqi;"></li>
<li style="--bg:hsl(205.94, 75%, 50%);--mx:-18.19cqi;--my:-17.4cqi;--d:1092.69ms;--t:8559.31ms;--x:59.23076923076923cqi;--y:16.153846153846153cqi;--sz:24.4cqi;"></li>
<li style="--bg:hsl(320.15, 75%, 50%);--mx:-21.97cqi;--my:-2.98cqi;--d:1371.14ms;--t:14755.82ms;--x:65.38461538461539cqi;--y:16.153846153846153cqi;--sz:14.33cqi;"></li>
<li style="--bg:hsl(322.04, 75%, 50%);--mx:38.99cqi;--my:-12.77cqi;--d:181.03ms;--t:17580.07ms;--x:71.53846153846155cqi;--y:16.153846153846153cqi;--sz:15.71cqi;"></li>
<li style="--bg:hsl(80.66, 75%, 50%);--mx:39.86cqi;--my:-9.47cqi;--d:383.89ms;--t:5413.35ms;--x:77.6923076923077cqi;--y:16.153846153846153cqi;--sz:8.19cqi;"></li>
<li style="--bg:hsl(112.32, 75%, 50%);--mx:48.45cqi;--my:22.53cqi;--d:1937.63ms;--t:8988.74ms;--x:83.84615384615385cqi;--y:16.153846153846153cqi;--sz:17.44cqi;"></li>
<li style="--bg:hsl(294.66, 75%, 50%);--mx:4.52cqi;--my:31.57cqi;--d:1128.11ms;--t:11732.61ms;--x:90cqi;--y:16.153846153846153cqi;--sz:14.53cqi;"></li>
<li style="--bg:hsl(173.24, 75%, 50%);--mx:21.31cqi;--my:32.48cqi;--d:1819.44ms;--t:18087.43ms;--x:10cqi;--y:22.307692307692307cqi;--sz:8.83cqi;"></li>
<li style="--bg:hsl(129.29, 75%, 50%);--mx:-9.83cqi;--my:22.47cqi;--d:4.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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