css花朵散布背景效果-html代码-BFW代码库

代码语言：html
所属分类：背景
代码描述：css花朵散布背景效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}
:root {
  --unit: 1vmin;
  --stroke: #333;
  --stroke-border: 1vmin solid #333;
}
body {
  background: #e5ffff;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.flower {
  --petal-color: hsl(var(--hue), 100%, 80%);
  height: calc(var(--size, 20) * var(--unit));
  width: calc(var(--size, 20) * var(--unit));
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  -webkit-animation: grow 0.25s calc(var(--delay, 0) * 1s) both cubic-bezier(0.35, 0.81, 0.87, 1.43);
          animation: grow 0.25s calc(var(--delay, 0) * 1s) both cubic-bezier(0.35, 0.81, 0.87, 1.43);
}
.flower *,
.flower *:after,
.flower *:before {
  position: absolute;
}
.flower__core {
  top: 50%;
  left: 50%;
  height: 30%;
  width: 30%;
  border-radius: 50%;
  border: var(--stroke-border);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #f2f20d;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.flower__core:after,
.flower__core:before {
  content: '';
  height: 25%;
  width: 220%;
  background: var(--stroke);
  border-radius: 5%/50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, -1px);
          transform: translate3d(-50%, -50%, -1px);
}
.flower__core:after {
  -webkit-transform: translate3d(-50%, -50%, -1px) rotate(90deg);
          transform: translate3d(-50%, -50%, -1px) rotate(90deg);
}
.flower__petal {
  height: 50%;
  width: 50%;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-clip-path: polygon(-50% 0, 50% 100%, 150% 0);
  clip-path: polygon(-50% 0, 50% 100%, 150% 0);
}
.flower__petal:after {
  content: '';
  width: 60%;
  left: 50%;
  height: 100%;
  border-radius: 50%;
  border-top: u(10) solid var(--petal-color, var(--default-petal-color));
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: translate(-50%, 0) rotate(180deg) translate(0, -34%);
          transform: translate(-50%, 0) rotate(180deg) translate(0, -34%);
  -webkit-clip-path: inset(0 0 80% 0);
  clip-path: inset(0 0 80% 0);
}
.flower__petal--0 {
  -webkit-transform: translate(-50%, 0) rotate(0deg);
          transform: translate(-50%, 0) rotate(0deg);
}
.flower__petal--1 {
  -webkit-transform: translate(-50%, 0) rotate(90deg);
          transform: translate(-50%, 0) rotate(90deg);
}
.flower__petal--2 {
  -webkit-transform: translate(-50%, 0) rotate(180deg);
          transform: translate(-50%, 0) rotate(180deg);
}
.flower__petal--3 {
  -webkit-transform: translate(-50%, 0) rotate(270deg);
          transform: translate(-50%, 0) rotate(270deg);
}
.flower__petal > div:nth-of-type(1) {
  left: 50%;
  width: 60%;
  height: 100%;
  bottom: 0;
  border-radius: 50%/25%;
  background: var(--stroke);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: translate(-50%, 0) rotate(-23deg) translate(0, 0);
          transform: translate(-50%, 0) rotate(-23deg) translate(0, 0);
}
.flower__petal > div:nth-of-type(2) {
  left: 50%;
  width: 60%;
  height: 100%;
  border-radius: 50%/25%;
  background: var(--stroke);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: translate(-50%, 0) rotate(23deg) translate(0, 0);
          transform: translate(-50%, 0) rotate(23deg) translate(0, 0);
}
.flower__petal > div:nth-of-type(2):after {
  content: '';
  height: 100%;
  width: 100%;
  border-top: u(10) solid var(--stroke);
  border-radius: 50%;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: rotate(-23deg) rotate(-180deg) translate(65%, -18%);
          transform: rotate(-23deg) rotate(-180deg) translate(65%, -18%);
  -webkit-clip-path: inset(0 0 81% 0);
  clip-path: inset(0 0 81% 0);
}
.flower__petal > div:nth-of-type(3) {
  left: 50%;
  width: 100%;
  height: 100%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-clip-path: polygon(-34% 0, 50% 90%, 134% 0);
  clip-path: polygon(-34% 0, 50% 90%, 134% 0);
}
.flower__petal > div:nth-of-type(3):after,
.flower__petal > div:nth-of-type(3):before {
  content: '';
  height: 100%;
  width: 43%;
  left: 50%;
  bottom: 0;
  border-radius: 50%/25%;
  background: var(--petal-color, var(--default-petal-color));
}
.flower__petal > div:nth-of-type(3):before {
  -webkit-transform: translate(-50%, 0) rotate(37deg) translate(27%, 0%);
          transform: translate(-50%, 0) rotate(37deg) translate(27%, 0%);
}
.flower__petal > div:nth-of-type(3):after {
  -webkit-transform: translate(-50%, 0) rotate(-37deg) translate(-27%, 0%);
          transform: translate(-50%, 0) rotate(-37deg) translate(-27%, 0%);
}
@-webkit-keyframes grow {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(0);
            transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(1);
            transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(1);
  }
}
@keyframes grow {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(0);
            transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(1);
            transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(1);
  }
}
</style>

</head>
<body translate="no">
<div class="flower" style="--x: 9; --y: 23; --hue: 157; --size: 31; --r: 186; --delay: 0;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 44; --y: 66; --hue: 343; --size: 31; --r: 34; --delay: 0.1;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 23; --y: 17; --hue: 7; --size: 12; --r: 266; --delay: 0.2;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 6; --y: 27; --hue: 161; --size: 44; --r: 65; --delay: 0.30000000000000004;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 91; --y: 46; --hue: 359; --size: 14; --r: 25; --delay: 0.4;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 37; --y: 82; --hue: 321; --size: 38; --r: 92; --delay: 0.5;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 42; --y: 61; --hue: 80; --size: 23; --r: 1; --delay: 0.6000000000000001;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 85; --y: 93; --hue: 333; --size: 27; --r: 172; --delay: 0.7000000000000001;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 72; --y: 30; --hue: 299; --size: 43; --r: 198; --delay: 0.8;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 62; --y: 85; --hue: 59; --size: 50; --r: 345; --delay: 0.9;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 13; --y: 35; --hue: 263; --size: 23; --r: 95; --delay: 1;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 30; --y: 80; --hue: 200; --size: 44; --r: 112; --delay: 1.1;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 74; --y: 63; --hue: 249; --size: 43; --r: 350; --delay: 1.2000000000000002;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 45; --y: 9; --hue: 160; --size: 48; --r: 162; --delay: 1.3;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 63; --y: 48; --hue: 171; --size: 32; --r: 208; --delay: 1.4000000000000001;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 67; --y: 71; --hue: 254; --size: 14; --r: 295; --delay: 1.5;">
<div class="flower__petal flower__petal--0">
<div></div>
 <div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 7; --y: 25; --hue: 163; --size: 43; --r: 40; --delay: 1.6;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 80; --y: 42; --hue: 324; --size: 36; --r: 357; --delay: 1.7000000000000002;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 58; --y: 32; --hue: 2; --size: 14; --r: 127; --delay: 1.8;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 57; --y: 25; --hue: 64; --size: 25; --r: 155; --delay: 1.9000000000000001;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 11; --y: 81; --hue: 346; --size: 49; --r: 356; --delay: 2;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower" style="--x: 98; --y: 53; --hue: 322; --size: 46; --r: 200; --delay: 2.1;">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div.........完整代码请登录后点击上方下载按钮下载查看