div+css布局实现冬青植物效果代码-html代码-BFW代码库

div+css布局实现冬青植物效果代码

代码语言：html

代码描述：div+css布局实现冬青植物效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
div {
  rotate: 100deg;
  background-color: transparent;
}

s {
  --red: #f83d2b;
  --w: 15cqw;
  --dot-position: 0 -4cqw;
  position: absolute;
  left: calc(50% - var(--w) / 2);
  bottom: 50%;
  width: 15cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 1cqw 1cqw 0 0 rgba(0, 0, 0, 0.15), inset -1cqw -1cqw 0 0.5cqw rgba(0, 0, 0, 0.2), inset var(--dot-position) 0 6.75cqw var(--red);
  background-color: color-mix(in srgb, var(--red), black 30%);
  translate: 0 10%;
}
s:nth-of-type(2) {
  --dot-position: -3cqw 3cqw;
  translate: -45% 80%;
}
s:nth-of-type(3) {
  --dot-position: 3cqw 3cqw;
  translate: 45% 80%;
}

i {
  --green: #098d44;
  --w: 33cqw;
  position: absolute;
  top: 0;
  left: calc(50% - var(--w) / 2);
  width: 33cqw;
  height: 50cqw;
  background-image: radial-gradient(white 15cqw, transparent calc(15cqw + 1px)), radial-gradient(white 15cqw, transparent calc(15cqw + 1px)), radial-gradient(white 7cqw, transparent calc(7cqw + 1px)), radial-gradient(white 7cqw, transparent calc(7cqw + 1px)), radial-gradient(white 5cqw, transparent calc(5cqw + 1px)), radial-gradient(white 5cqw, transparent calc(5cqw + 1px)), radial-gradient(circle, wh.........完整代码请登录后点击上方下载按钮下载查看