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:446.04ms;--t:9713.89ms;--x:16.153846153846153cqi;--y:22.307692307692307cqi;--sz:22.39cqi;"></li>
<li style="--bg:hsl(102.78, 75%, 50%);--mx:-17.25cqi;--my:43.33cqi;--d:1232.84ms;--t:9131.12ms;--x:22.307692307692307cqi;--y:22.307692307692307cqi;--sz:17.33cqi;"></li>
<li style="--bg:hsl(200.99, 75%, 50%);--mx:25.13cqi;--my:7.07cqi;--d:801.95ms;--t:5874.46ms;--x:28.461538461538463cqi;--y:22.307692307692307cqi;--sz:22.46cqi;"></li>
<li style="--bg:hsl(158.22, 75%, 50%);--mx:24.4cqi;--my:49.44cqi;--d:1556.71ms;--t:17282.31ms;--x:34.61538461538461cqi;--y:22.307692307692307cqi;--sz:12.98cqi;"></li>
<li style="--bg:hsl(328.85, 75%, 50%);--mx:-20.16cqi;--my:-12.56cqi;--d:509.87ms;--t:9730.71ms;--x:40.769230769230774cqi;--y:22.307692307692307cqi;--sz:17.35cqi;"></li>
<li style="--bg:hsl(176.44, 75%, 50%);--mx:49.08cqi;--my:42.65cqi;--d:1116.33ms;--t:10594.98ms;--x:46.92307692307693cqi;--y:22.307692307692307cqi;--sz:2.47cqi;"></li>
<li style="--bg:hsl(140.39, 75%, 50%);--mx:26.54cqi;--my:26.56cqi;--d:466.35ms;--t:5624.69ms;--x:53.07692307692308cqi;--y:22.307692307692307cqi;--sz:1.14cqi;"></li>
<li style="--bg:hsl(258.73, 75%, 50%);--mx:1.97cqi;--my:44.56cqi;--d:1546.83ms;--t:24327.7ms;--x:59.23076923076923cqi;--y:22.307692307692307cqi;--sz:14cqi;"></li>
<li style="--bg:hsl(160.48, 75%, 50%);--mx:0.99cqi;--my:22.64cqi;--d:135.47ms;--t:18367.71ms;--x:65.38461538461539cqi;--y:22.307692307692307cqi;--sz:8.38cqi;"></li>
<li style="--bg:hsl(147.54, 75%, 50%);--mx:13.51cqi;--my:6.44cqi;--d:155.56ms;--t:24765.68ms;--x:71.53846153846155cqi;--y:22.307692307692307cqi;--sz:8.54cqi;"></li>
<li style="--bg:hsl(15.23, 75%, 50%);--mx:-7.82cqi;--my:43.93cqi;--d:1587.05ms;--t:23357.42ms;--x:77.6923076923077cqi;--y:22.307692307692307cqi;--sz:7.54cqi;"></li>
<li style="--bg:hsl(94.13, 75%, 50%);--mx:2.55cqi;--my:41.11cqi;--d:943.7ms;--t:19492.29ms;--x:83.84615384615385cqi;--y:22.307692307692307cqi;--sz:17.26cqi;"></li>
<li style="--bg:hsl(99.65, 75%, 50%);--mx:37.16cqi;--my:22.98cqi;--d:996.84ms;--t:17439.63ms;--x:90cqi;--y:22.307692307692307cqi;--sz:21.3cqi;"></li>
<li style="--bg:hsl(188.76, 75%, 50%);--mx:-20.15cqi;--my:8.41cqi;--d:1167.72ms;--t:23155.79ms;--x:10cqi;--y:28.461538461538463cqi;--sz:3.79cqi;"></li>
<li style="--bg:hsl(73.2, 75%, 50%);--mx:1.62cqi;--my:8.19cqi;--d:417.54ms;--t:20465.25ms;--x:16.153846153846153cqi;--y:28.461538461538463cqi;--sz:9.22cqi;"></li>
<li style="--bg:hsl(189.51, 75%, 50%);--mx:34.09cqi;--my:-23.05cqi;--d:1606.03ms;--t:5860.72ms;--x:22.307692307692307cqi;--y:28.461538461538463cqi;--sz:8.89cqi;"></li>
<li style="--bg:hsl(89.91, 75%, 50%);--mx:-22.1cqi;--my:34.2cqi;--d:435.01ms;--t:14697.84ms;--x:28.461538461538463cqi;--y:28.461538461538463cqi;--sz:2.47cqi;"></li>
<li style="--bg:hsl(304.02, 75%, 50%);--mx:42.07cqi;--my:6.36cqi;--d:113.73ms;--t:12000.16ms;--x:34.61538461538461cqi;--y:28.461538461538463cqi;--sz:10.26cqi;"></li>
<li style="--bg:hsl(324.51, 75%, 50%);--mx:20.78cqi;--my:41.14cqi;--d:160.82ms;--t:16978.41ms;--x:40.769230769230774cqi;--y:28.461538461538463cqi;--sz:14.9cqi;"></li>
<li style="--bg:hsl(87.5, 75%, 50%);--mx:35.65cqi;--my:47.35cqi;--d:1583.48ms;--t:6517.15ms;--x:46.92307692307693cqi;--y:28.461538461538463cqi;--sz:17.44cqi;"></li>
<li style="--bg:hsl(138.26, 75%, 50%);--mx:4.89cqi;--my:4.22cqi;--d:875.66ms;--t:12857.04ms;--x:53.07692307692308cqi;--y:28.461538461538463cqi;--sz:13.31cqi;"></li>
<li style="--bg:hsl(158.16, 75%, 50%);--mx:10.41cqi;--my:-11.11cqi;--d:1204.69ms;--t:20101.01ms;--x:59.23076923076923cqi;--y:28.461538461538463cqi;--sz:2.73cqi;"></li>
<li style="--bg:hsl(244.34, 75%, 50%);--mx:46.82cqi;--my:0.11cqi;--d:519.6ms;--t:19291.32ms;--x:65.38461538461539cqi;--y:28.461538461538463cqi;--sz:19.4cqi;"></li>
<li style="--bg:hsl(107.46, 75%, 50%);--mx:-17.43cqi;--my:47.73cqi;--d:314ms;--t:19184.3ms;--x:71.53846153846155cqi;--y:28.461538461538463cqi;--sz:19.77cqi;"></li>
<li style="--bg:hsl(92.12, 75%, 50%);--mx:-20.42cqi;--my:32.12cqi;--d:1658.41ms;--t:5924.39ms;--x:77.6923076923077cqi;--y:28.461538461538463cqi;--sz:22.59cqi;"></li>
<li style="--bg:hsl(277.84, 75%, 50%);--mx:17.83cqi;--my:46.98cqi;--d:1740.12ms;--t:15103.84ms;--x:83.84615384615385cqi;--y:28.461538461538463cqi;--sz:17.53cqi;"></li>
<li style="--bg:hsl(183.89, 75%, 50%);--mx:34.2cqi;--my:32.34cqi;--d:1612.26ms;--t:15371.69ms;--x:90cqi;--y:28.461538461538463cqi;--sz:4.52cqi;"></li>
<li style="--bg:hsl(68.75, 75%, 50%);--mx:6.98cqi;--my:40.58cqi;--d:861.61ms;--t:7261.11ms;--x:10cqi;--y:34.61538461538461cqi;--sz:15.29cqi;"></li>
<li style="--bg:hsl(202.53, 75%, 50%);--mx:-11.11cqi;--my:31.85cqi;--d:606.92ms;--t:24140.43ms;--x:16.153846153846153cqi;--y:34.61538461538461cqi;--sz:23.13cqi;"></li>
<li style="--bg:hsl(90.31, 75%, 50%);--mx:3.84cqi;--my:38.33cqi;--d:1545.4ms;--t:14511.06ms;--x:22.307692307692307cqi;--y:34.61538461538461cqi;--sz:5.08cqi;"></li>
<li style="--bg:hsl(176.18, 75%, 50%);--mx:1.87cqi;--my:11.36cqi;--d:1025.18ms;--t:8257.88ms;--x:28.461538461538463cqi;--y:34.61538461538461cqi;--sz:16.84cqi;"></li>
<li style="--bg:hsl(278.64, 75%, 50%);--mx:-6.7cqi;--my:45.49cqi;--d:1656.31ms;--t:11125.61ms;--x:34.61538461538461cqi;--y:34.61538461538461cqi;--sz:24.68cqi;"></li>
<li style="--bg:hsl(354.61, 75%, 50%);--mx:2.07cqi;--my:29.41cqi;--d:1954.94ms;--t:12723.79ms;--x:40.769230769230774cqi;--y:34.61538461538461cqi;--sz:6.98cqi;"></li>
<li style="--bg:hsl(311.56, 75%, 50%);--mx:27.65cqi;--my:19.77cqi;--d:1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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