div+css实现彩色随机圆点缩放位移动画效果代码-html代码-BFW代码库

div+css实现彩色随机圆点缩放位移动画效果代码

代码语言：html

所属分类：动画

代码描述：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%);--.........完整代码请登录后点击上方下载按钮下载查看