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: 
.........完整代码请登录后点击上方下载按钮下载查看