css布局实现蓝色松鸭效果-html代码-BFW代码库

css布局实现蓝色松鸭效果

代码语言：html

代码描述：css布局实现蓝色松鸭效果

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


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

<style>
.cartoon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
html, body {
  --primary: #48e;
  --secondary: #ccc;
  background: var(--secondary);
}

.cartoon {
  width: 100vmin;
  height: 100vmin;
  background-size: cover;
  background-position: center center;
}

.body {
  width: 42%;
  height: 38%;
  background: var(--primary);
  background: radial-gradient(at 36% 45%, black 22%, var(--primary) 0);
  transform: rotate(45deg);
  top: 25%;
  left: 24%;
  clip-path: polygon(52% 35%, 41% 39%, 50% 0%, 100% 0, 100% 200%, 53% 200%, 65% 40%, 60% 30%);
  box-shadow: inset 14vmin 1vmin black, inset -4vmin 4vmin white;
}

.body::before {
  width: 40%;
  height: 20%;
  background: var(--primary);
  border-radius: 50%;
  transform: rotate(90deg);
  top: 83%;
  left: 48.5%;
  box-shadow: 3vmin -1vmin var(--secondary), inset -1vmin 0.5vmin white;
}

.body::after {
  width: 60%;
  height: 26%;
  background: var(--primary);
  border-radius: 100%;
  transform: rotate(94deg);
  top: 95%;
  left: 27.5%;
  box-shadow: 3vmin -1vmin var(--secondary), inset -1vmin 0.5vmin white;
}

.eye {
  width: 2.5%;
  height: 2.5%;
  background: black;
  box-shadow: 1vmin 0.8vmin 0 1.35vmin white;
  top: 36.5%;
  left: 54%;
  transform: translate(-50%, -50%);
}

.neck {
  width: 60%;
  height: 20%;
  box-shadow: 6vmin 2vmin 0 -3vmin var(--primary);
  border-radius: 0 0% 70% 0%;
  transform: rotate(-27deg);
  top: 44%;
  left: -3%;
}

.neck::after {
  z-index: ;
  width: 40%;
  height: 80%;
  right: 5%;
  top: 13%;
  border-radius: 100%;
  box-shadow: 4.5vmin 0 0 -3vmin var(--primary), inset -0.5vmin 1v.........完整代码请登录后点击上方下载按钮下载查看