div+css布局实现好看精致的花朵效果代码-html代码-BFW代码库

div+css布局实现好看精致的花朵效果代码

代码语言：html

代码描述：div+css布局实现好看精致的花朵效果代码

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

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

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

  
  
<style>
:root {
  --lc1: hsl(290, 70%, 70%);
  --lc2: hsl(290, 70%, 40%);
  --lc3: hsl(290, 70%, 20%);
  --lc4: hsl(290, 70%, 10%);
  --lca1: hsla(290, 70%, 80%, .5);
  
  --lc5: hsla(160, 20%, 23%, .85);
  
  --cc1: hsl(40, 70%, 70%);
  --cc2: hsl(40, 70%, 40%);
  --cca1: hsl(40, 70%, 90%, .5);
  --cca2: hsl(40, 70%, 40%, .1);
}

body {
  display: grid;
  place-items: center;
  background: radial-gradient(circle, hsl(200, 70%, 25%), hsl(200, 70%, 10%));
  font-size: 1.5vmin;
  height: 100vh;
}

.flower {
  --leaf-deg: 30deg;
  --leaf-h: 16em;
  --leaf-w: 8em;
  --leaf-p: 4em;
  --left-center: calc(100% - var(--leaf-w) / 2);
  
  --center-s: 4em;
  
  position: relative;
  height: calc(var(--leaf-h) * 2.5);
}

.center {
  position: absolute;
  top: calc(50% - var(--center-s) / 2);
  left: calc(50% - var(--center-s) / 2);
  height: var(--center-s);
  width: var(--center-s);
  border-radius: 50%;
  z-index: 50;
  box-shadow: 0 0 .2em .1em var(--cca1), 0 0 1em .2em;
  background: 
    radial-gradient(var(--cca2) 50%, #0000 70%) 0 0 / .5em .5em,
    radial-gradient(circle at 70% 30%,var(--cca1) 10%, #0000 20%),
    radial-gradient(var(--cc1) 40%, var(--cc2))
    ;
}

.leaf {
  position: absolute;
  height: var(--leaf-h);
  width: var(--leaf-w);
  top: calc(var(--leaf-p) / 1.3);
  left: var(--left-center);
  border-radius: 40% 40% 50% 50% / 20% 20% 80% 80%;
  box-shadow: inset 0 .4em 1em .7em var(--lc3), 0 -.1em .1em .05em var(--lc1), 0 -.1em 1em .4em var(--lc4);
  background: 
    conic-gradient(at 50% 75%,#0000 160deg, var(--lc5) 165deg 175deg, #0000 180deg 360deg) 0 0 / 5em 100% no-repeat,
    conic-gradient(at 50% 70%,#0000 170deg, var(--lc5) 175deg 185deg, #0000 190deg 360deg) 38% 0 / 5em 100% no-repeat,
    conic-gradient(at 50% 72%,#0000 170deg, var(--lc5) 175deg 185deg, #0000 190deg 360deg) 65% 0 / 5em 100% no-repeat,
    conic-gradient(at 50% 77%,#0000 180deg, var(--lc5) 185deg 195deg, #0000 200deg 360deg) 94% 0 / 5em 100% no-repeat,
    radial-gradient(circle at 70% 20%,var(--lca1) 5%, #0000 10%),
    radial-gradient(circle at 50% 70%,var(--lca1) 10%, #0000 30%),
    radial-gradient(var(--lca1) 55%, #0000 70%) 0 0 / 20% 100%,
    repeating-linear-gradient(90deg, var(--lc1) .05em .2em, var(--lc2) .25em .4em)
    ;
}

.leaf:nth-child(1) {
  z-index: 10;
}
.leaf:nth-child(2) {
  top: var(-.........完整代码请登录后点击上方下载按钮下载查看