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%);
  width: 80vmin;
  height: 80vmin;
}

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

.b {
  border: 0.5vmin solid;
}

.r {
  border-radius: 100%;
}

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

/****/
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #1585;
  background-image:
    radial-gradient(circle at 50% 50%, white 2.5%, transparent 0),
    radial-gradient(circle at 30% 90%, white 2.5%, transparent 0),
    radial-gradient(circle at 70% 10%, white 1%, transparent 0),
    radial-gradient(circle at 10% 40%, white 1%, transparent 0);
  background-size: 40vmin 40vmin, 30vmin 40vmin, 60vmin 50vmin;
  
}

.cartoon {
  --skin: #fca;
  --beard: #eee;
  --eyes: #630a;
  --cheeks: #f001;
  --belt: #111;
  --belt-buckle: gold;
  --suit: #a00;
}

.cartoon::before {
  top: 90%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  background: white;
  transform: translate(-50%, 0) rotate(1deg);
}

.head {
  width: 25%;
  height: 25%;
  background: var(--skin);
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
}

.beard {
  width: 30%;
  height: 40%;
  background: var(--beard);
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 100% / 120% 120% 80% 80%;
}

.mustache {
  width: 10%;
  height: 10%;
  background: #fff;
  border-radius: 100% 20% 100% 0;
  top: 31%;
  left: 51%;
  transform-origin: top right;
  transform: translate(-100%, 0) rotate(25deg);
}

.mustache + .mustache {
  left: 49%;
  border-radius: 20% 100% 0 100%;
  transform-origin: top left;
  transform: rotate(-25deg);
}

.eyes {
  width: 2%;
  height: 2%;
  background: var(--eyes);
  top: 23%;
  left: 45%;
  box-shadow: 6.66vmin 0 var(--eyes);
}

.cheeks {
  width: 5%;
  height: 3%;
  background: var(--cheeks);
  top: 25.5%;
  left: 43%;
  box-shadow: 7.25vmin 0 var(--cheeks);
}

.body {
  width: 50%;
  height: 50%;
  background: var(--suit);
  border-radius: 100% / 150% 150% 25% 25%;
  top: 35%;
  left: 50%;
  transform: translate(-50%, 0);
  background-image:
    radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 0 83%, transparent 0),
    linear-gradient(to right, transparent 42%, white 43% 57%, transparent 58%)
}

.arm {
  width: 65%;
  height: 40%;
  background: #a00;
  border-radius: 100% / 170% 170% 25% 25%;
  top: 37%;
  left: 50%;
  transform: translate(-50%, 0);
  abox-shadow: inset 0 0 0 10vmin #0002;
  background-image: linear-gradient(transparent 20%, #0003)
}

.belt {
  width: 20%;
  height: 15%;
  border: 1vmin solid var(--belt-buckle);
  border-radius: 1vmin;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bel.........完整代码请登录后点击上方下载按钮下载查看