css-doodles实现好看的随机花朵效果代码-html代码-BFW代码库

css-doodles实现好看的随机花朵效果代码

代码语言：html

所属分类：其他

代码描述：css-doodles实现好看的随机花朵效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e1e;
}

graph {
  position: relative;
  width: 70vmin;
  height: 100vmin;
  background: #1e1e1e;
}
</style>

 
  
  
</head>

<body translate="no">
  <style>
  css-doodle {
    --rule: (
      :doodle {
        @grid: 200x1 / 70vmin 100vmin;
        overflow: visible;
        contain: initial;
        --colors: @p(
          (#e9dbce, #fceade, #ea526f, #e2c290, #6b2d5c, #25ced1),
          (#c9cba3, #ffe1a8, #e26d5c, #723d46, #472d30),
          (#2B2B2B, #91B3E1, #2F5FB3, #3D4B89, #AE99E8, #DBE2EC),
          (#114b5f, #1a936f, #88d498, #c6dabf, #f3e9d2),
          (#e42268, #fb8075, #761871, #5b7d9c, #a38cb4, #476590)
        );
        --color-1: @p(--colors);
        --color-2: @P;
        --color-3: @P;
        --color-4: @P;
        --color-5: @P;
        --color-6: @P;
        background-image: @svg(
          viewBox: 0 0 1000 1000;
          circle*400 {
            cx: @r(20, 980);
            cy: @r(20, 980);
            r: @r(.01, 3);
            fill: @p(--colors);
          }
        );
        filter: @svg-filter(
          feTurbulence {
            type: fractalNoise;
            baseFrequency: 0.8;
          }
          feDisplacementMap {
            in: SourceGraphic;
            scale: 1.5;
          }
        );
      }

      position: absolute;
      @keyframes keyframes {
        from { scale: 1; }
        to { scale: 0; }
      }

      @match (i < @p(1, 41)) {
        @size: @r(5, 12)vmin;
        @place: @r(0, 100)% @r(60, 100)%;
        transform: rotate(cal.........完整代码请登录后点击上方下载按钮下载查看