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