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