51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落
当前位置：工具盒子 > 白嫖帮 > 正文

HTML5：CSS3画一个可爱动漫宠物

2024-11-24 分类：白嫖帮 阅读(53) 评论(0)

好久没发布关于HTML5和CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：

111.jpg

HTML代码：

<label for="toggle">Toggle body overflow</label>
<input id="toggle" type="checkbox"/>
<div class="jigglypuff">
  <div class="jigglypuff__left-arm"></div>
  <div class="jigglypuff__left-foot"></div>
  <div class="jigglypuff__right-foot"></div>
  <div class="jigglypuff__ear-left">
    <div class="jigglypuff__ear-left-inner"></div>
  </div>
  <div class="jigglypuff__ear-right">
    <div class="jigglypuff__ear-right-inner"></div>
  </div>
  <div class="jigglypuff__body"></div>
  <div class="jigglypuff__right-arm"></div>
  <div class="jigglypuff__mouth"></div>
  <div class="jigglypuff__eye-left">
    <div class="jigglypuff__eye-left-pupil"></div>
  </div>
  <div class="jigglypuff__eye-right">
    <div class="jigglypuff__eye-right-pupil"></div>
  </div>
  <div class="jigglypuff__tuft-container">
    <div class="jigglypuff__tuft"></div>
    <div class="jigglypuff__tuft-line"></div>
  </div>
</div>

CSS代码：

*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --size: 50;
  --unit: calc((var(--size) / 853) * 1vmin);
  --pink: #efc7d0;
  --pink-dark: #daa4ae;
  --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%);
  --inner-ear: #161922;
  --border: #262626;
  --eye-light: #4c9cae;
  --eye-dark: #0e7486;
  --pupil-backdrop: #053747;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background: #b9f;
}
.jigglypuff {
  height: calc(805 * var(--unit));
  width: calc(853 * var(--unit));
  position: relative;
}
.jigglypuff * {
  position: absolute;
}
.jigglypuff__body {
  background: var(--pink-dark);
  left: 9.5%;
  top: 15%;
  height: 77.25%;
  width: 73%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 60% 53% 61% 58%/53% 58% 58% 61%;
  overflow: hidden;
}
.jigglypuff__body:before {
  content: '';
  background: var(--pink);
  width: 239%;
  height: 210%;
  left: 57%;
  bottom: 20%;
  border-radius: 50%/0 0 100% 100%;
  transform: translate(-50%, 0) rotate(4deg);
  position: absolute;
  transform-origin: bottom center;
}
.jigglypuff__left-arm {
  top: 56%;
  left: 0.75%;
  height: 15%;
  border: calc(5 * var(--unit)) solid var(--border);
  width: 27%;
  background: var(--pink-dark);
  border-radius: 70% 0 0 100%/25% 0 0 75%;
  transform-origin: 100% 50%;
  transform: rotate(1deg);
  overflow: hidden;
}
.jigglypuff__left-arm:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 41%;
  border-radius: 0 0 60% 0/0 0 83% 0;
  background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%);
  left: -5%;
  top: 50%;
  transform: translate(0, -50%);
}
.jigglypuff__left-arm:after {
  content: '';
  top: 20%;
  left: 7%;
  height: 19%;
  width: 15%;
  background: var(--glare);
  position: absolute;
  border-radius: 50%;
}
.jigglypuff__right-arm {
  top: 77%;
  left: 58.5%;
  background: var(--pink-dark);
  width: 11%;
  border: calc(5 * var(--unit)) solid var(--border);
  height: 12%;
  transform: rotate(-10deg);
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: 0;
}
.jigglypuff__right-arm:before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--pink);
  height: 100%;
  width: 80%;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  z-index: 2;
}
.jigglypuff__right-arm:after {
  content: '';
  position: absolute;
  background: var(--glare);
  height: 40%;
  width: 25%;
  border-radius: 50%;
  left: 21%;
  bottom: 57%;
  z-index: 3;
  transform: rotate(-10deg);
}
.jigglypuff__left-foot {
  height: 26%;
  width: 12%;
  background: var(--pink-dark);
  bottom: 0%;
  left: 17%;
  transform: rotate(70deg);
  border-radius: 29% 70% 50% 50%/24% 39% 67% 55%;
  border: calc(5 * var(--unit)) solid var(--border);
  overflow: hidden;
}
.jigglypuff__left-foot:after {
  content: '';
  position: absolute;
  bottom: -7%;
  height: 60%;
  width: 150%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));
}
.jigglypuff__left-foot:before {
  content: '';
  position: absolute;
  bottom: 9%;
  left: 20%;
  height: 25%;
  width: 30%;
  background: var(--glare);
  border-radius: 50%;
  transform: rotate(-10deg);
  z-index: 2;
}
.jigglypuff__right-foot {
  height: 25%;
  width: 13%;
  background: var(--pink-dark);
  border: calc(5 * var(--unit)) solid var(--border);
  bottom: 0;
  left: 61%;
  border-radius: 25% 39% 45% 101%/50% 64% 56% 97%;
  transform-origin: 0 100%;
  transform: rotate(-51deg) translate(0, 29%);
  overflow: hidden;
}
.jigglypuff__right-foot:before {
  content: '';
  position: absolute;
  bottom: -10%;
  background: radial-gradient(var(--pink) 50%, var(--pink-dark));
  width: 165%;
  height: 62%;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, 0);
}
.jigglypuff__right-foot:after {
  content: '';
  position: absolute;
  height: 15%;
  width: 35%;
  background: var(--glare);
  border-radius: 50%;
  bottom: 20%;
  right: 10%;
  transform: rotate(50deg);
  filter: blur(2px);
}
.jigglypuff__ear-left {
  height: 30%;
  width: 25%;
  background: var(--pink);
  left: 24%;
  top: 0%;
  transform-origin: 0 0;
  transform: rotate(19deg);
  border-radius: 9% 85% 25% 26%/17% 30% 0 50%;
  border: calc(5 * var(--unit)) solid var(--border);
}
.jigglypuff__ear-left:after {
  content: '';
  height: 50%;
  width: 75%;
  background: var(--inner-ear);
  position: absolute;
  bottom: 91%;
  left: 8%;
  border: calc(5 * var(--unit)) solid var(--border);
  transform-origin: 0 100%;
  transform: rotate(28deg) translate(0, 100%);
  border-radius: 50%/15%;
  -webkit-clip-path: inset(0 0 90% 0);
  clip-path: inset(0 0 90% 0);
}
.jigglypuff__ear-left-inner {
  height: 80%;
  width: 58%;
  background: var(--inner-ear);
  left: 10%;
  top: 8%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 15% 0 0 44%/20% 0 0 70%;
  overflow: hidden;
  -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);
  clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);
}
.jigglypuff__ear-left-inner:before {
  content: '';
  height: 42%;
  width: 70%;
  border-radius: 50%;
  bottom: 0;
  left: -11%;
  position: absolute;
  background: var(--glare);
}
.jigglypuff__ear-right {
  height: 35%;
  width: 31%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: var(--pink);
  right: 0%;
  top: 35%;
  transform-origin: 100% 0;
  transform: rotate(30deg);
  border-radius: 100% 5% 56% 0/51% 5% 65% 0;
}
.jigglypuff__ear-right:after {
  content: '';
  background: var(--inner-ear);
  width: 61%;
  height: 68%;
  right: 4%;
  top: 11%;
  position: absolute;
  border-top: calc(5 * var(--unit)) solid var(--border);
  -webkit-clip-path: inset(0 0 97% 80%);
  clip-path: inset(0 0 97% 80%);
}
.jigglypuff__ear-right-inner {
  background: var(--inner-ear);
  width: 61%;
  height: 68%;
  right: 8%;
  top: 11%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 95% 5% 46% 0/76% 5% 70% 0;
  overflow: hidden;
  box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);
}
.jigglypuff__ear-right-inner:before {
  content: '';
  z-index: 2;
  background: var(--glare);
  height: 50%;
  width: 67%;
  border-radius: 50%;
  bottom: 4%;
  right: -20%;
  position: absolute;
}
.jigglypuff__mouth {
  top: 47%;
  left: 33%;
  transform-origin: 0 50%;
  height: 15%;
  width: 18%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 50%;
  transform: rotate(16deg);
  -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
  clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
}
.jigglypuff__tuft-container {
  top: 11%;
  left: 34%;
  height: 37%;
  width: 37%;
}
.jigglypuff__tuft-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 6%;
  height: 50%;
  width: 54%;
  border-radius: 50%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: var(--pink);
  -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%);
  clip-path: polygon(100% 23%, 47% 100%, 100% 100%);
}
.jigglypuff__tuft {
  background: var(--pink);
  height: 100%;
  width: 100%;
  border-radius: 85% 50% 50% 39%/80% 52% 50% 55%;
  border: calc(5 * var(--unit)) solid var(--border);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);
}
.jigglypuff__tuft-line {
  height: 25%;
  width: 34%;
  top: 62%;
  left: 40%;
  border-radius: 95% 0 0 0/61% 0 0 0;
  border-top: calc(5 * var(--unit)) solid var(--border);
}
.jigglypuff__eye-left {
  height: 24%;
  width: 21%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: #fff;
  top: 34%;
  left: 16%;
  border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;
}
.jigglypuff__eye-left:after {
  content: '';
  position: absolute;
  right: 13%;
  top: 41%;
  height: 13%;
  width: 14%;
  background: #fff;
  -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  -webkit-animation: twinkle 1.5s 0.75s infinite;
          animation: twinkle 1.5s 0.75s infinite;
}
.jigglypuff__eye-left-pupil {
  border: calc(5 * var(--unit)) solid var(--border);
  height: 77%;
  width: 78%;
  right: 2%;
  top: 10%;
  border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;
  background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);
}
.jigglypuff__eye-left-pupil:after {
  content: '';
  position: absolute;
  top: 11%;
  right: 10%;
  height: 25%;
  width: 26%;
  background: radial-gradient(#fff 75%, transparent);
  border-radius: 50%;
}
.jigglypuff__eye-left-pupil:before {
  content: '';
  height: 20%;
  width: 28%;
  bottom: 5%;
  left: 18%;
  background: var(--glare);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}
.jigglypuff__eye-right {
  border: calc(5 * var(--unit)) solid var(--border);
  top: 46%;
  left: 51%;
  height: 25%;
  width: 21%;
  border-radius: 61% 48% 56% 50%/50% 50% 58% 50%;
  background: #fff;
}
.jigglypuff__eye-right:after {
  content: '';
  position: absolute;
  right: 13%;
  top: 41%;
  height: 13%;
  width: 14%;
  background: #fff;
  -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  -webkit-animation: twinkle 2s infinite;
          animation: twinkle 2s infinite;
}
.jigglypuff__eye-right-pupil {
  height: 79%;
  width: 81%;
  right: 2%;
  top: 10%;
  overflow: hidden;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 61% 48% 56% 50%/50% 50% 58% 50%;
  background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);
}
.jigglypuff__eye-right-pupil:after {
  content: '';
  position: absolute;
  top: 7%;
  right: 15%;
  height: 24%;
  width: 27%;
  border-radius: 50%;
  background: radial-gradient(#fff 75%, transparent);
}
.jigglypuff__eye-right-pupil:before {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 18%;
  border-radius: 50%;
  height: 20%;
  width: 37%;
  background: var(--glare);
  z-index: 2;
}
label {
  margin-bottom: 1rem;
  z-index: 3;
}
:checked {
  z-index: 3;
}
:checked ~ .jigglypuff .jigglypuff__body {
  overflow: visible;
}
@-webkit-keyframes twinkle {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(540deg) scale(1.2);
  }
  100% {
    transform: rotate(1080deg) scale(0);
  }
}
@keyframes twinkle {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(540deg) scale(1.2);
  }
  100% {
    transform: rotate(1080deg) scale(0);
  }
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5：CSS3画一个可爱动漫宠物 | Web前端之家www.jiangweishan.com</title>
    <style>
        *,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --size: 50;
  --unit: calc((var(--size) / 853) * 1vmin);
  --pink: #efc7d0;
  --pink-dark: #daa4ae;
  --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%);
  --inner-ear: #161922;
  --border: #262626;
  --eye-light: #4c9cae;
  --eye-dark: #0e7486;
  --pupil-backdrop: #053747;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background: #b9f;
}
.jigglypuff {
  height: calc(805 * var(--unit));
  width: calc(853 * var(--unit));
  position: relative;
}
.jigglypuff * {
  position: absolute;
}
.jigglypuff__body {
  background: var(--pink-dark);
  left: 9.5%;
  top: 15%;
  height: 77.25%;
  width: 73%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 60% 53% 61% 58%/53% 58% 58% 61%;
  overflow: hidden;
}
.jigglypuff__body:before {
  content: '';
  background: var(--pink);
  width: 239%;
  height: 210%;
  left: 57%;
  bottom: 20%;
  border-radius: 50%/0 0 100% 100%;
  transform: translate(-50%, 0) rotate(4deg);
  position: absolute;
  transform-origin: bottom center;
}
.jigglypuff__left-arm {
  top: 56%;
  left: 0.75%;
  height: 15%;
  border: calc(5 * var(--unit)) solid var(--border);
  width: 27%;
  background: var(--pink-dark);
  border-radius: 70% 0 0 100%/25% 0 0 75%;
  transform-origin: 100% 50%;
  transform: rotate(1deg);
  overflow: hidden;
}
.jigglypuff__left-arm:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 41%;
  border-radius: 0 0 60% 0/0 0 83% 0;
  background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%);
  left: -5%;
  top: 50%;
  transform: translate(0, -50%);
}
.jigglypuff__left-arm:after {
  content: '';
  top: 20%;
  left: 7%;
  height: 19%;
  width: 15%;
  background: var(--glare);
  position: absolute;
  border-radius: 50%;
}
.jigglypuff__right-arm {
  top: 77%;
  left: 58.5%;
  background: var(--pink-dark);
  width: 11%;
  border: calc(5 * var(--unit)) solid var(--border);
  height: 12%;
  transform: rotate(-10deg);
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: 0;
}
.jigglypuff__right-arm:before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--pink);
  height: 100%;
  width: 80%;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  z-index: 2;
}
.jigglypuff__right-arm:after {
  content: '';
  position: absolute;
  background: var(--glare);
  height: 40%;
  width: 25%;
  border-radius: 50%;
  left: 21%;
  bottom: 57%;
  z-index: 3;
  transform: rotate(-10deg);
}
.jigglypuff__left-foot {
  height: 26%;
  width: 12%;
  background: var(--pink-dark);
  bottom: 0%;
  left: 17%;
  transform: rotate(70deg);
  border-radius: 29% 70% 50% 50%/24% 39% 67% 55%;
  border: calc(5 * var(--unit)) solid var(--border);
  overflow: hidden;
}
.jigglypuff__left-foot:after {
  content: '';
  position: absolute;
  bottom: -7%;
  height: 60%;
  width: 150%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));
}
.jigglypuff__left-foot:before {
  content: '';
  position: absolute;
  bottom: 9%;
  left: 20%;
  height: 25%;
  width: 30%;
  background: var(--glare);
  border-radius: 50%;
  transform: rotate(-10deg);
  z-index: 2;
}
.jigglypuff__right-foot {
  height: 25%;
  width: 13%;
  background: var(--pink-dark);
  border: calc(5 * var(--unit)) solid var(--border);
  bottom: 0;
  left: 61%;
  border-radius: 25% 39% 45% 101%/50% 64% 56% 97%;
  transform-origin: 0 100%;
  transform: rotate(-51deg) translate(0, 29%);
  overflow: hidden;
}
.jigglypuff__right-foot:before {
  content: '';
  position: absolute;
  bottom: -10%;
  background: radial-gradient(var(--pink) 50%, var(--pink-dark));
  width: 165%;
  height: 62%;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, 0);
}
.jigglypuff__right-foot:after {
  content: '';
  position: absolute;
  height: 15%;
  width: 35%;
  background: var(--glare);
  border-radius: 50%;
  bottom: 20%;
  right: 10%;
  transform: rotate(50deg);
  filter: blur(2px);
}
.jigglypuff__ear-left {
  height: 30%;
  width: 25%;
  background: var(--pink);
  left: 24%;
  top: 0%;
  transform-origin: 0 0;
  transform: rotate(19deg);
  border-radius: 9% 85% 25% 26%/17% 30% 0 50%;
  border: calc(5 * var(--unit)) solid var(--border);
}
.jigglypuff__ear-left:after {
  content: '';
  height: 50%;
  width: 75%;
  background: var(--inner-ear);
  position: absolute;
  bottom: 91%;
  left: 8%;
  border: calc(5 * var(--unit)) solid var(--border);
  transform-origin: 0 100%;
  transform: rotate(28deg) translate(0, 100%);
  border-radius: 50%/15%;
  -webkit-clip-path: inset(0 0 90% 0);
  clip-path: inset(0 0 90% 0);
}
.jigglypuff__ear-left-inner {
  height: 80%;
  width: 58%;
  background: var(--inner-ear);
  left: 10%;
  top: 8%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 15% 0 0 44%/20% 0 0 70%;
  overflow: hidden;
  -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);
  clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);
}
.jigglypuff__ear-left-inner:before {
  content: '';
  height: 42%;
  width: 70%;
  border-radius: 50%;
  bottom: 0;
  left: -11%;
  position: absolute;
  background: var(--glare);
}
.jigglypuff__ear-right {
  height: 35%;
  width: 31%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: var(--pink);
  right: 0%;
  top: 35%;
  transform-origin: 100% 0;
  transform: rotate(30deg);
  border-radius: 100% 5% 56% 0/51% 5% 65% 0;
}
.jigglypuff__ear-right:after {
  content: '';
  background: var(--inner-ear);
  width: 61%;
  height: 68%;
  right: 4%;
  top: 11%;
  position: absolute;
  border-top: calc(5 * var(--unit)) solid var(--border);
  -webkit-clip-path: inset(0 0 97% 80%);
  clip-path: inset(0 0 97% 80%);
}
.jigglypuff__ear-right-inner {
  background: var(--inner-ear);
  width: 61%;
  height: 68%;
  right: 8%;
  top: 11%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 95% 5% 46% 0/76% 5% 70% 0;
  overflow: hidden;
  box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);
}
.jigglypuff__ear-right-inner:before {
  content: '';
  z-index: 2;
  background: var(--glare);
  height: 50%;
  width: 67%;
  border-radius: 50%;
  bottom: 4%;
  right: -20%;
  position: absolute;
}
.jigglypuff__mouth {
  top: 47%;
  left: 33%;
  transform-origin: 0 50%;
  height: 15%;
  width: 18%;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 50%;
  transform: rotate(16deg);
  -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
  clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
}
.jigglypuff__tuft-container {
  top: 11%;
  left: 34%;
  height: 37%;
  width: 37%;
}
.jigglypuff__tuft-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 6%;
  height: 50%;
  width: 54%;
  border-radius: 50%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: var(--pink);
  -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%);
  clip-path: polygon(100% 23%, 47% 100%, 100% 100%);
}
.jigglypuff__tuft {
  background: var(--pink);
  height: 100%;
  width: 100%;
  border-radius: 85% 50% 50% 39%/80% 52% 50% 55%;
  border: calc(5 * var(--unit)) solid var(--border);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);
}
.jigglypuff__tuft-line {
  height: 25%;
  width: 34%;
  top: 62%;
  left: 40%;
  border-radius: 95% 0 0 0/61% 0 0 0;
  border-top: calc(5 * var(--unit)) solid var(--border);
}
.jigglypuff__eye-left {
  height: 24%;
  width: 21%;
  border: calc(5 * var(--unit)) solid var(--border);
  background: #fff;
  top: 34%;
  left: 16%;
  border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;
}
.jigglypuff__eye-left:after {
  content: '';
  position: absolute;
  right: 13%;
  top: 41%;
  height: 13%;
  width: 14%;
  background: #fff;
  -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  -webkit-animation: twinkle 1.5s 0.75s infinite;
          animation: twinkle 1.5s 0.75s infinite;
}
.jigglypuff__eye-left-pupil {
  border: calc(5 * var(--unit)) solid var(--border);
  height: 77%;
  width: 78%;
  right: 2%;
  top: 10%;
  border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;
  background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);
}
.jigglypuff__eye-left-pupil:after {
  content: '';
  position: absolute;
  top: 11%;
  right: 10%;
  height: 25%;
  width: 26%;
  background: radial-gradient(#fff 75%, transparent);
  border-radius: 50%;
}
.jigglypuff__eye-left-pupil:before {
  content: '';
  height: 20%;
  width: 28%;
  bottom: 5%;
  left: 18%;
  background: var(--glare);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}
.jigglypuff__eye-right {
  border: calc(5 * var(--unit)) solid var(--border);
  top: 46%;
  left: 51%;
  height: 25%;
  width: 21%;
  border-radius: 61% 48% 56% 50%/50% 50% 58% 50%;
  background: #fff;
}
.jigglypuff__eye-right:after {
  content: '';
  position: absolute;
  right: 13%;
  top: 41%;
  height: 13%;
  width: 14%;
  background: #fff;
  -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%);
  -webkit-animation: twinkle 2s infinite;
          animation: twinkle 2s infinite;
}
.jigglypuff__eye-right-pupil {
  height: 79%;
  width: 81%;
  right: 2%;
  top: 10%;
  overflow: hidden;
  border: calc(5 * var(--unit)) solid var(--border);
  border-radius: 61% 48% 56% 50%/50% 50% 58% 50%;
  background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);
}
.jigglypuff__eye-right-pupil:after {
  content: '';
  position: absolute;
  top: 7%;
  right: 15%;
  height: 24%;
  width: 27%;
  border-radius: 50%;
  background: radial-gradient(#fff 75%, transparent);
}
.jigglypuff__eye-right-pupil:before {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 18%;
  border-radius: 50%;
  height: 20%;
  width: 37%;
  background: var(--glare);
  z-index: 2;
}
label {
  margin-bottom: 1rem;
  z-index: 3;
}
:checked {
  z-index: 3;
}
:checked ~ .jigglypuff .jigglypuff__body {
  overflow: visible;
}
@-webkit-keyframes twinkle {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(540deg) scale(1.2);
  }
  100% {
    transform: rotate(1080deg) scale(0);
  }
}
@keyframes twinkle {
  0% {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(540deg) scale(1.2);
  }
  100% {
    transform: rotate(1080deg) scale(0);
  }
}

    </style>
</head>


<body>
    
<label for="toggle">Toggle body overflow</label>
<input id="toggle" type="checkbox"/>
<div class="jigglypuff">
  <div class="jigglypuff__left-arm"></div>
  <div class="jigglypuff__left-foot"></div>
  <div class="jigglypuff__right-foot"></div>
  <div class="jigglypuff__ear-left">
    <div class="jigglypuff__ear-left-inner"></div>
  </div>
  <div class="jigglypuff__ear-right">
    <div class="jigglypuff__ear-right-inner"></div>
  </div>
  <div class="jigglypuff__body"></div>
  <div class="jigglypuff__right-arm"></div>
  <div class="jigglypuff__mouth"></div>
  <div class="jigglypuff__eye-left">
    <div class="jigglypuff__eye-left-pupil"></div>
  </div>
  <div class="jigglypuff__eye-right">
    <div class="jigglypuff__eye-right-pupil"></div>
  </div>
  <div class="jigglypuff__tuft-container">
    <div class="jigglypuff__tuft"></div>
    <div class="jigglypuff__tuft-line"></div>
  </div>
</div>
</body>
</html>

赞(6)
未经允许不得转载：工具盒子 » HTML5：CSS3画一个可爱动漫宠物
标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐

最新文章

猜你喜欢

快捷分类

云服务器 日常运维 在线免费 开源工具 科学上网 开发笔记 区块链 白嫖帮 新视野 人工智能 网赚思路 Python笔记 Php笔记 Java笔记 链知识 币知识 IOS笔记 Android笔记 Mysql C语言笔记 前端开发 R笔记 Go笔记 mybatis笔记 Golang笔记 数据库 市场营销 软件教程 vps Rust笔记 软件使用 经验分享 Stable Diffusion chatgpt Midjourney 操作系统 Photoscape 加密货币 挖矿 Coze Meta 网络安全 网络运营 开源软件 Github ComfyUI 数字人 Docker笔记 Claude Oracle web3 linux windows mac redis git笔记 nginx kafka maven spring RocketMQ Zabbix ubuntu centos kubesphere ffmpeg jenkins hbase JavaScript笔记 WordPress nginx Hadoop vuejs mongo SQL Server PostgreSQL SQLite ElasticSearch Spark netty zookeeper RabbitMQ ClickHoust cocos2d gradle tomcat Markdown MinIO react Hexo git intellij idea android studio svn C++ spdlog nodejs C WordPress 宝塔面板 vim shell logstash 软件渗透 NeoDB CSS3 HTML Lua笔记 数据算法 嵌入式 debian 红帽RHEL Neo4j jquery nas 1panel aapanel 浏览器 谷歌 .net 微信 telegram Cloudflare 大数据 rust layui JumpServer DataEase TiDB DM数据库 虚拟机 elk sqlmap nacos Firefox C# Swagger Foxmail navicat DeepSeek