css实现一个卡通圣诞精灵效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个卡通圣诞精灵效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#8bea, #9cfa calc(50% + 33vmin), #eee 0, #fff);
}

.canvas {
  --red: #c00;
  --white: #eee;
  --green: #090;
  --green-dark: #080;
  --green-darker: #070;
  --skin: #fca;
  --skin-dark: #fb9;
  --skin-darker: #ea8;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas div,
.canvas div::before,
.canvas div::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.leg {
  bottom: 0;
  left: 42%;
  width: 20%;
  height: 30%;
  border-radius: 30% / 100%;
  background:
    radial-gradient(farthest-side at 100% 30%, #000, #0000),
    radial-gradient(farthest-side at 100% 70%, #000, #0000),
    repeating-radial-gradient(circle at 50% -40%, var(--red) 0 8%, var(--white) 0 16%)
    ;
  background-color: #f008;
  -webkit-mask:
    radial-gradient(100% 150% at 60% 55%, #0000 50%, #000 51%);
  mask:
    radial-gradient(100% 150% at 60% 55%, #0000 50%, #000 51%)
}

.leg + .leg {
  left: 38%;
  transform: scaleX(-1);
  border-radius: 35% / 100%;
  -webkit-mask:
    radial-gradient(100% 150% at 60% 55%, #0000 49%, #000 50%);
  mask:
    radial-gradient(100% 150% at 60% 55%, #0000 49%, #000 50%)
}

.boot {
  width: 15%;
  height: 3%;
  bottom: 0;
  left: 31%;
  border-radius: 50% 100% 100% 100% / 10% 20% 0 10vmin;
  background: var(--green);
  -webkit-mask:
    radial-gradient(100% 50% at 100% 0%, #0000 98%, #000 100%);
  mask:
    radial-gradient(100% 50% at 100% 0%, #0000 98%, #000 100%);
}

.boot + .boot {
  transform: scaleX(-1);
  left: 54%;
}

.boot-top {
  width: 5%;
  height: 2%;
  background: var(--green-darker);
  border-radius: 5vmin;
  bottom: 1.25%;
  left: 41.5%;
  transform: rotate(2deg);
}

.boot-top + .boot-top {
  left: 53.5%;
  transform: rotate(-4deg);
}

.vest {
  width: 18.5%;
  background: var(--green);
  background: linear-gradient(var(--green-dark), var(--green));
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
/*   height: 15%;
  border-radius: 30% 30% 20% 20% / 120% 120% 100% 100%;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 80% 70%, 65% 100%, 50% 75%, 40% 100%, 25% 69%, 0% 100%); */
  height: 13%;
/*   clip-path: polygon(12% 0, 88% 0%, 100% 100%, 80% 70%, 65% 100%, 50% 75%, 40% 100%, 25% 69%, 0% 100%); */
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 80% 72%, 69% 98%, 50% 70%, 28% 100%, 25% 67%, 0% 100%);
  -webkit-mask:
    radial-gradient(100% 320% at 50% 100%, #000 49%, #0000 50%);
  mask: radial-gradient(100% 320% at 50% 100%, #000 49%, #0000 50%);
  box-shadow: 
    inset -2vmin 0 1vmin var(--green-dark), 
    inset 2vmin 0 1vmin var(--green-dark),
    inset 0vmin 2vmin 1vmin var(--green-dark)
}

.belt {
  width: 14.5%;
  height: 4%;
  background: #222;
  top: 61%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10% 10% 0 0;
}

.belt::before {
  content: "";
  width: 40%;
  height: 120%;
  border: 0.75vmin solid gold;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 0);
  background:
    linear-gradient(gold 0 0) no-repeat 80% 50% / 25% 15%
}

.body {
  width: 14.25%;
  height: 21%;
  top: 41%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40% 30% 0 0;
  background:
    radial-gradient(circle at 50% 25%, gold 4%, #0000 0),
    radial-gradient(circle at 50% 50%, gold 5%, #0000 0),
    radial-gradient(circle at 50% 75%, gold 4%, #0000 0)
    ;
  background-color: var(--green);
  box-shadow:
    inset 0 1vmin 2vmin var(--green),
    inset -1vmin 0 2vmin var(--green-dark), 
    inset 1vmin 0 2vmin var(--green-dark),
    inset 0 -1vmin 2vmin var(--green-dark);
}

.collar {
  width: 17%;
  height: 5%;
  background: var(--white);
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 80% 62%, 69% 98%, 50% 50%, 28% 100%, 25% 57%, 0% 100%);
  -webkit-mask:
    radial-gradient(100% 200% at 50% 100%, #000 49%, #0000 50%);
  mask: radial-gradient(100% 200% at 50% 100%, #000 49%, #0000 50%);
  top: 39.5%;
  left: 50%;
  transform: translate(-50%, 0);
}

.arm-left {
  width: 20%;
  height: 36%;
  top: 35%;
  left: 27%;
  background:
    radial-gradient(100% 150% at 100% 100%, #0000 50%, var(--green-dark) 0, var(--green) 57%, #0000 0);
  transform: rotate(5deg);
}

.arm-right {
  width: 25%;
  height: 25%;
  top: 40%;
  left: 57.5%;
  transform: rotate(0);
  background:
    radial-gradient(100% 150% at 45% 0%, #0000 40%, var(--green) 0, var(--green-dark) 45%, #0000 0);
  transform: rotate(-10deg);
}
.........完整代码请登录后点击上方下载按钮下载查看