css实现圆点径向扩散可调节动画背景代码-html代码-BFW代码库

css实现圆点径向扩散可调节动画背景代码

代码语言：html

所属分类：背景

代码描述：css实现圆点径向扩散可调节动画背景代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  <style>
      :root {
  --text: CanvasText;
  --bkg: Canvas;
  --pad: 1rem;  
  
  --c1: transparent;
  --c2: midnightblue;
  --c3: darkviolet;

  &:has(#colors-2:checked) {
    --c2: darkred;
    --c3: lightsalmon;
  }

  &:has(#colors-3:checked) {
    --c2: darkolivegreen;
    --c3: yellowgreen;
  }
  
  --bkg: oklch(from var(--c2) calc(l - .165) c h);
  
  --speed: 10;
  --color-stop: 0%;
  --play-state: paused;

  @media(prefers-reduced-motion: no-preference) {
    --play-state: running;
  }

  &:has(#stop-anim:checked) {
    --play-state: paused;
  }
  
  color-scheme: dark;
}

@property --color-stop {
  syntax: "<percentage>".........完整代码请登录后点击上方下载按钮下载查看