今天在国外一个网站看到一个不错的CSS效果，一个纯CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下：
废话不多说，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分享一个纯CSS3实现的绘制动画效果：可爱宠物 - Web前端之家https://jiangweishan.com/</title>
<style>
* {
box-sizing: border-box;
}
:root {
--coefficient: 1vmin;
--size: 50;
--min-size: 200;
--unit: calc((var(--size) / 493) * var(--coefficient));
--stroke: #0d0d0d;
--lip-color: #ffb3b3;
--cheek-color: #ff8080;
--tongue-color: #f33;
--cap-color: #47c20a;
--leaf-color: #369108;
--backdrop: #0e8134;
--eye-shade: #4d3c33;
--fur-color: #b4a088;
--face: #f2f2f2;
--eye: #f2f2f2;
--outfit: #f2a60d;
--pupil: #0a3a5c;
--pot-color: #fc6;
--default-petal-color: #f00;
--cap-accent: #ffd500;
--peak-color: #2d7906;
--flower-core: #f2cc0d;
--stroke-border: calc(5 * var(--unit)) solid var(--stroke);
}
body {
min-height: 100vh;
background: #ffb3b3;
}
img,
.leif {
height: calc(511 * var(--unit));
width: calc(493 * var(--unit));
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.leif *,
.leif *:after,
.leif *:before {
position: absolute;
}
.leif__himself {
height: 100%;
width: 100%;
-webkit-clip-path: circle(50% at 50% 38%);
clip-path: circle(50% at 50% 38%);
}
.leif__container {
height: 100%;
width: 100%;
-webkit-animation: pop-in 0.5s 1s both cubic-bezier(0.58, 0.68, 0.71, 1.41);
animation: pop-in 0.5s 1s both cubic-bezier(0.58, 0.68, 0.71, 1.41);
}
.leif__eye-closed {
-webkit-animation: blink-closed 8s infinite steps(1);
animation: blink-closed 8s infinite steps(1);
border: calc(10 * var(--unit)) solid var(--stroke);
-webkit-clip-path: polygon(0 45%, 100% 60%, 100% 100%, 0 100%);
clip-path: polygon(0 45%, 100% 60%, 100% 100%, 0 100%);
border-radius: 50%;
}
.leif__eye-closed--left {
height: 18%;
left: 12%;
width: 14%;
bottom: 51%;
}
.leif__eye-closed--right {
height: 19%;
left: 48%;
width: 16%;
bottom: 45%;
}
.leif__arch {
height: 100%;
width: 100%;
border-radius: 50%;
background: var(--backdrop);
bottom: 12%;
border: var(--stroke-border);
}
.leif__eye-open {
-webkit-animation: blink-open 8s infinite steps(1);
animation: blink-open 8s infinite steps(1);
}
.leif__eye-open--left {
height: 18%;
left: 12%;
width: 14%;
border-radius: 50%;
background: var(--eye);
bottom: 51%;
}
.leif__eye-open--left:after {
content: '';
position: absolute;
top: 35%;
left: 60%;
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--pupil);
}
.leif__eye-open--right {
height: 19%;
left: 48%;
width: 16%;
border-radius: 50%;
background: var(--eye);
bottom: 45%;
}
.leif__eye-open--right:after {
content: '';
position: absolute;
top: 34%;
left: 39%;
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--pupil);
}
.leif__pot {
height: 17%;
width: 20%;
background: var(--stroke);
left: 32%;
top: 60%;
transform: rotate(-4deg);
-webkit-clip-path: polygon(0 -100%, 100% -100%, 100% 25%, 90% 25%, 70% 100%, 30% 100%, 10% 25%, 0 25%);
clip-path: polygon(0 -100%, 100% -100%, 100% 25%, 90% 25%, 70% 100%, 30% 100%, 10% 25%, 0 25%);
}
.leif__pot:after,
.leif__pot:before {
content: '';
background: var(--pot-color);
left: 50%;
transform: translate(-50%, 0);
z-index: 3;
}
.leif__pot:before {
height: 15%;
width: 90%;
top: 5%;
}
.leif__pot:after {
bottom: 5%;
height: 70%;
width: 90%;
-webkit-clip-path: polygon(0 -100%, 100% -100%, 100% 25%, 92% -10%, 70% 100%, 30% 100%, 8% -10%, 0 25%);
clip-path: polygon(0 -100%, 100% -100%, 100% 25%, 92% -10%, 70% 100%, 30% 100%, 8% -10%, 0 25%);
}
.leif__pot .flower__container {
width: 100%;
height: 100%;
left: 0;
bottom: 0;
-webkit-animation: grow 2s 2s linear both;
animation: grow 2s 2s linear both;
}
.leif__pot .flower__show {
height: 100%;
width: 100%;
left: 0;
bottom: 100%;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.leif__pot .flower {
bottom: 0;
--size: 70;
--r: 40;
--hue: 210;
z-index: -2;
}
.leif__pot .flower:before {
content: '';
width: 10%;
height: 100%;
background: var(--stroke);
top: 50%;
left: 50%;
transform-origin: 50% 0;
transform: rotate(calc(var(--r) * -1deg)) translate(-50%, 0);
}
.leif__arm--right {
left: 56%;
top: 58%;
height: 15%;
transform: rotate(7deg);
width: 9%;
border: var(--stroke-border);
border-radius: 30% 70%;
background: var(--fur-color);
}
.leif__body {
height: 50%;
width: 27%;
background: var(--outfit);
top: 50%;
left: 36%;
border: var(--stroke-border);
border-radius: 40% 60% 50% 50%/62% 62% 30% 30%;
}
.leif__body:after,
.leif__body:before {
content: '';
}
.leif__body:before {
height: 20%;
width: 100%;
top: 15%;
left: 0;
background: var(--fur-color);
-webkit-clip-path: polygon(0 50%, 25% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 50%, 25% 0, 100% 0, 100% 100%, 0 100%);
}
.leif__body:after {
width: 25%;
height: 30%;
border: var(--stroke-border);
border-radius: 50%;
right: 10%;
top: 10%;
background: var(--outfit);
transform: rotate(12deg) translate(15%, 0);
}
.leif__forearm {
height: 8%;
width: 20%;
background: var(--fur-color);
border: var(--stroke-border);
top: 65.25%;
left: 42%;
transform-origin: 100% 50%;
transform: rotate(-8deg);
border-radius: 30% 0 0 30%/25% 0 0 25%;
-webkit-clip-path: polygon(-50% 0, 90% 0, 96% 100%, -50% 100%);
clip-path: polygon(-50% 0, 90% 0, 96% 100%, -50% 100%);
}
.leif__forearm .claw {
width: 35%;
height: 35%;
border-radius: 50%;
background: var(--stroke);
top: calc(var(--t, 5) * 1%);
right: 95%;
transform-origin: 100% 50%;
transform: rotate(calc(var(--r, 1) * 1deg));
-webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.leif__forearm .claw:nth-of-type(2) {
--t: 30;
--r: -3;
}
.leif__forearm .claw:nth-of-type(3) {
--t: 60;
--r: 2;
}
.leif__head {
top: 13.5%;
width: 62%;
height: 48%;
left: 51.5%;
transform: translate(-50%, 0%);
background: var(--fur-color);
border-radius: 50%/50%;
border: var(--stroke-border);
}
.leif__face {
bottom: 7%;
left: 3%;
height: 85%;
width: 83.5%;
border-radius: 47% 50% 61% 52%/48% 57% 54% 56%;
overflow: hidden;
}
.leif__face-border {
height: 100%;
width: 100%;
}
.leif__face-border div:nth-of-type(1) {
height: 74%;
width: 47%;
background: var(--face);
border-radius: 50%;
top: 6%;
left: -1%;
transform: rotate(17deg);
}
.leif__face-border div:nth-of-type(2) {
background: var(--face);
top: 4%;
transform: rotate(-44deg);
right: 4%;
border-radius: 50%;
height: 84%;
width: 51%;
}
.leif__face-border div:nth-of-type(3) {
height: 150%;
width: 200%;
top: 50%;
left: 50%;
background: var(--face);
transform: translate(-50%, 0);
}
.leif__face-patch {
height: 150%;
width: 100%;
top: 40%;
left: 50%;
background: var(--face);
transform: translate(-50%, 0);
-webkit-clip-path: polygon(0 15%, 8% 2%, 15% 9%, 26% 9%, 31% 0, 50% 0, 53% 11%, 68% 15%, 77% 8%, 100% 42%);
clip-path: polygon(0 15%, 8% 2%, 15% 9%, 26% 9%, 31% 0, 50% 0, 53% 11%, 68% 15%, 77% 8%, 100% 42%);
}
.leif__nose {
background: var(--lip-color);
top: 50%;
left: 27%;
border-radius: 50%/50%;
height: 16%;
width: 18%;
transform: rotate(10deg);
}
.leif__nose:after,
.leif__nose:before {
content: '';
width: 13%;
height: 34%;
background: #404040;
border-radius: 50%/25%;
}
.leif__nose:after {
left: 31%;
top: 35%;
}
.leif__nose:before {
left: 59%;
top: 37%;
}
.leif__cheek {
background: var(--cheek-color);
border-radius: 50% 50% 40% 60%/50% 50% 50% 50%;
}
.leif__cheek--left {
height: 20%;
width: 10%;
top: 52%;
left: 4%;
}
.leif__cheek--right {
height: 20%;
width: 16%;
top: 62%;
right: 18%;
}
.leif__mouth-patch {
width: 50%;
height: 5%;
background: var(--face);
bottom: 36%;
left: 14%;
transform-origin: 0 100%;
transform: rotate(5deg);
}
.leif__arm--left {
height: 30%;
width: 8%;
top: 56%;
background: var(--fur-color);
border: var(--stroke-border);
left: 40%;
border-radius: 100% 0 50% 50%/50%;
transform-origin: 50% 0;
transform: rotate(34deg);
}
.leif__arm--left .claw {
height: 13%;
width: 10%;
background: var(--stroke);
border-radius: 50%;
top: 95%;
left: calc(var(--x, 26) * 1%);
}
.leif__arm--left .claw:nth-of-type(2) {
--x: 37;
}
.leif__arm--left .claw:nth-of-type(3) {
--x: 50;
}
.leif__mouth {
width: 45%;
height: 26%;
background: var(--face);
bottom: 12%;
left: 14%;
-webkit-clip-path: polygon(0 5%, 100% 17%, 100% 100%, 0 100%);
clip-path: polygon(0 5%, 100% 17%, 100% 100%, 0 100%);
}
.leif__mouth > div:nth-of-type(1) {
background: var(--lip-color);
width: 150%;
height: 200%;
bottom: 0;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, 0) rotate(4deg);
border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.leif__mouth > div:nth-of-type(2) {
background: #000;
bottom: 21%;
width: 133%;
height: 200%;
border-radius: 0 0 50% 50%/0 0 100% 100%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, 0) rotate(4deg);
overflow: hidden;
-webkit-clip-path: polygon(50% 50%, 87% 100%, 10% 100%);
clip-path: polygon(50% 50%, 87% 100%, 10% 100%);
}
.leif__mouth > div:nth-of-type(2):after {
content: '';
height: 10%;
width: 26%;
border-radius: 50% 50% 0 0/100% 100% 0 0;
bottom: -2%;
left: 50%;
transform: translate(-50%, 0);
background: var(--tongue-color);
}
.leif__mouth > div:nth-of-type(3) {
background: var(--lip-color);
bottom: 43%;
width: 185%;
height: 200%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, 0) rotate(4deg);
border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.leif__mouth > div:nth-of-type(4) {
background: var(--face);
bottom: 62%;
width: 185%;
height: 200%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, 0) rotate(4deg);
border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.leif__mouth > div:nth-of-type(5) {
left: 0%;
top: 0;
height: 100%;
width: 21%;
border-top: calc(10 * var(--unit)) solid var(--face);
border-radius: 50%;
transform: rotate(-49deg) translate(27%, -5%);
}
.leif__mouth > div:nth-of-type(6) {
right: 0%;
top: 0;
height: 100%;
width: 24%;
border-top: calc(10 * var(--unit)) solid var(--face);
border-radius: 50%;
transform: rotate(52deg) translate(0%, 5%);
}
.leif__eye--left {
height: 40%;
width: 30%;
top: 22%;
background: var(--face);
overflow: hidden;
}
.leif__eye--left > div {
background: var(--eye-shade);
height: 111%;
width: 107%;
right: 0;
top: 0;
border-radius: 65% 30% 50% 50%/78% 36% 50% 0%;
}
.leif__eye--left > div > div:nth-of-type(1) {
background: var(--face);
height: 100%;
width: 100%;
border-radius: 65% 30% 50% 50%/78% 36% 50% 0%;
top: 29%;
left: 6%;
transform: rotate(4deg);
}
.leif__eye--left > div > div:nth-of-type(2) {
background: var(--eye-shade);
width: 68%;
height: 68%;
border-radius: 50%;
right: 0;
}
.leif__eye--right {
background: var(--face);
height: 45%;
width: 52%;
left: 50%;
top: 31%;
transform: rotate(52deg);
overflow: hidden;
}
.leif__eye--right > div {
background: var(--eye-shade);
height: 131%;
width: 138%;
left: 0;
top: 3%;
border-radius: 50% 50% 0 100%/50% 30% 0 55%;
}
.leif__eye--right > div > div:nth-of-type(1) {
background: var(--face);
height: 109%;
width: 87%;
transform: rotate(19deg) translate(10%, 19%);
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
.leif__eye--right > div > div:nth-of-type(2) {
background: var(--eye-shade);
height: 57%;
width: 35%;
border-radius: 50%;
top: 16%;
left: 0;
}
.leif__eye--right > div > div:nth-of-type(2):after {
content: '';
height: 27%;
width: 36%;
border-radius: 50%;
border-top: calc(5 * var(--unit)) solid var(--eye-shade);
left: 92%;
top: 17%;
transform: rotate(-60deg);
}
.leif__cap {
height: 20%;
width: 30%;
left: 39%;
top: 1%;
}
.leif__cap > div:nth-of-type(1) {
right: 0;
top: 0;
width: 90%;
height: 150%;
border-radius: 50%;
border: var(--stroke-border);
background: var(--cap-color);
}
.leif__cap > div:nth-of-type(1) > div {
background: var(--cap-color);
height: 10%;
width: 17%;
border-radius: 50%;
top: 13%;
left: 31%;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(1) {
z-index: 2;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(2),
.leif__cap > div:nth-of-type(1) > div:nth-of-type(3),
.leif__cap > div:nth-of-type(1) > div:nth-of-type(4),
.leif__cap > div:nth-of-type(1) > div:nth-of-type(5),
.leif__cap > div:nth-of-type(1) > div:nth-of-type(6) {
background: var(--cap-accent);
transform: translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)) rotate(calc(var(--r, 0) * 1deg));
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(2) {
--x: -55;
--y: -5;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(3) {
--x: 22;
--y: -70;
--r: 120;
height: 12%;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(4) {
--x: 85;
--y: -5;
--r: -20;
height: 11%;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(5) {
--x: 30;
--y: 80;
--r: 60;
height: 11%;
}
.leif__cap > div:nth-of-type(1) > div:nth-of-type(6) {
--x: -50;
--y: 80;
--r: 130;
height: 11%;
}
.leif__cap > div:nth-of-type(2) {
width: 107%;
height: 62%;
top: 48%;
border: var(--stroke-border);
border-radius: 50%;
transform: rotate(17deg) translate(-1%, 1%);
background: var(--peak-color);
}
.flower {
--petal-color: hsl(var(--hue), 100%, 50%);
height: calc(var(--size, 125) * var(--unit));
width: calc(var(--size, 125) * var(--unit));
bottom: 1%;
left: 50%;
transform: translate(-50%, 0) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)) rotate(calc(var(--r, 0) * 1deg));
}
.flower__core {
top: 50%;
left: 50%;
height: 30%;
width: 30%;
border-radius: 50%;
border: var(--stroke-border);
transform: translate(-50%, -50%);
background: var(--flower-core);
transform-style: preserve-3d;
}
.flower__core:after,
.flower__core:before {
content: '';
height: 25%;
width: 220%;
background: var(--stroke);
border-radius: 5%/50%;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, -1px);
}
.flower__core:after {
transform: translate3d(-50%, -50%, -1px) rotate(90deg);
}
.flower__petal {
height: 50%;
width: 50%;
top: 0;
left: 50%;
transform: translate(-50%, 0);
transform-origin: 50% 100%;
-webkit-clip-path: polygon(-50% 0, 50% 100%, 150% 0);
clip-path: polygon(-50% 0, 50% 100%, 150% 0);
}
.flower__petal:after {
content: '';
width: 60%;
left: 50%;
height: 100%;
border-radius: 50%;
border-top: calc(10 * var(--unit)) solid var(--petal-color, var(--default-petal-color));
transform-origin: 50% 0;
transform: translate(-50%, 0) rotate(180deg) translate(0, -34%);
-webkit-clip-path: inset(0 0 80% 0);
clip-path: inset(0 0 80% 0);
}
.flower__petal--0 {
transform: translate(-50%, 0) rotate(0deg);
}
.flower__petal--1 {
transform: translate(-50%, 0) rotate(90deg);
}
.flower__petal--2 {
transform: translate(-50%, 0) rotate(180deg);
}
.flower__petal--3 {
transform: translate(-50%, 0) rotate(270deg);
}
.flower__petal > div:nth-of-type(1) {
left: 50%;
width: 60%;
height: 100%;
bottom: 0;
border-radius: 50%/25%;
background: var(--stroke);
transform-origin: 50% 100%;
transform: translate(-50%, 0) rotate(-23deg) translate(0, 0);
}
.flower__petal > div:nth-of-type(2) {
left: 50%;
width: 60%;
height: 100%;
border-radius: 50%/25%;
background: var(--stroke);
transform-origin: 50% 100%;
transform: translate(-50%, 0) rotate(23deg) translate(0, 0);
}
.flower__petal > div:nth-of-type(2):after {
content: '';
height: 100%;
width: 100%;
border-top: calc(10 * var(--unit)) solid var(--stroke);
border-radius: 50%;
transform-origin: 50% 0;
transform: rotate(-23deg) rotate(-180deg) translate(65%, -18%);
-webkit-clip-path: inset(0 0 81% 0);
clip-path: inset(0 0 81% 0);
}
.flower__petal > div:nth-of-type(3) {
left: 50%;
width: 100%;
height: 100%;
bottom: 0;
transform: translate(-50%, 0);
-webkit-clip-path: polygon(-34% 0, 50% 90%, 134% 0);
clip-path: polygon(-34% 0, 50% 90%, 134% 0);
}
.flower__petal > div:nth-of-type(3):after,
.flower__petal > div:nth-of-type(3):before {
content: '';
height: 100%;
width: 43%;
left: 50%;
bottom: 0;
border-radius: 50%/25%;
background: var(--petal-color, var(--default-petal-color));
}
.flower__petal > div:nth-of-type(3):before {
transform: translate(-50%, 0) rotate(37deg) translate(27%, 0%);
}
.flower__petal > div:nth-of-type(3):after {
transform: translate(-50%, 0) rotate(-37deg) translate(-27%, 0%);
}
.flower--1 {
--hue: 190;
--x: 0;
--y: 0;
--size: 125;
--r: 0;
}
.flower--2 {
--hue: 320;
--x: 140;
--y: -75;
--size: 75;
--r: 40;
}
.flower--3 {
--hue: 30;
--x: -140;
--y: -75;
--size: 75;
--r: 80;
}
.flower--4 {
--hue: 0;
--x: -170;
--y: -85;
--size: 105;
--r: 85;
}
.flower--5 {
--hue: 260;
--x: 170;
--y: -85;
--size: 105;
--r: -85;
}
.leaf {
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
height: 14%;
width: 7%;
transform-origin: 50% 100%;
transform: rotate(calc(var(--r) * 1deg)) scale(var(--scale, 1)) rotateY(calc(var(--flip, 0) * 180deg));
}
.leaf > div:nth-of-type(1) {
border-radius: 90% 10% 50% 50%/75% 10% 50% 25%;
height: 100%;
width: 100%;
background: var(--stroke);
-webkit-clip-path: polygon(0 0, 103% 0, 50% 50%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 103% 0, 50% 50%, 100% 100%, 0 100%);
}
.leaf > div:nth-of-type(2) {
background: var(--leaf-color);
width: 100%;
border-radius: 50%;
height: 100%;
border-radius: 90% 10% 50% 50%/75% 10% 50% 25%;
transform: scale(0.7) translate(6%, 0);
-webkit-clip-path: polygon(0 0, 90% 0, 75% 50%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 90% 0, 75% 50%, 100% 100%, 0 100%);
}
.leaf > div:nth-of-type(3) {
height: 100%;
width: 100%;
left: 100%;
top: 0;
border-left: var(--stroke-border);
border-width: calc(10 * var(--unit));
transform-origin: bottom center;
border-radius: 90% 10% 50% 50%/75% 10% 50% 25%;
transform: translate(-15%, 0) rotate(-18deg);
-webkit-clip-path: polygon(0 0, 71% 0, 100% 41%, 9% 81%);
clip-path: polygon(0 0, 71% 0, 100% 41%, 9% 81%);
}
.leaf--1 {
--x: 8;
--y: 52;
--r: 5;
--flip: 0;
--scale: 1;
}
.leaf--2 {
--x: 9;
--y: 56;
--r: -45;
--flip: 1;
--scale: 1.1;
}
.leaf--3 {
--x: 23;
--y: 68;
--r: -85;
--flip: 0;
--scale: 1;
}
.leaf--4 {
--x: 26;
--y: 67;
--r: 70;
--flip: 1;
--scale: 1.05;
}
.leaf--5 {
--x: 24;
--y: 68;
--r: -140;
--flip: 0;
--scale: 1;
}
.leaf--6 {
--x: 66;
--y: 66;
--r: -65;
--flip: 0;
--scale: 1;
}
.leaf--7 {
--x: 71;
--y: 68;
--r: 145;
--flip: 1;
--scale: 1;
}
.leaf--8 {
--x: 71;
--y: 68;
--r: 90;
--flip: 1;
--scale: 1;
}
.leaf--9 {
--x: 84;
--y: 52;
--r: 5;
--flip: 1;
--scale: 1;
}
.leaf--10 {
--x: 86;
--y: 52;
--r: 40;
--flip: 1;
--scale: 1;
}
.star {
height: calc(20 * var(--unit));
width: calc(20 * var(--unit));
top: calc(var(--y, 50) * 1%);
left: calc(var(--x, 50) * 1%);
-webkit-animation: sparkle 2s calc(var(--d, 0) * 1s) infinite both;
animation: sparkle 2s calc(var(--d, 0) * 1s) infinite both;
}
.star:after,
.star:before {
content: '';
height: 100%;
width: 40%;
border-radius: 50%/25%;
background: #fff;
left: 50%;
top: 0;
transform: translate(-50%, 0) rotate(calc(var(--r, 0) * 1deg));
}
.star:after {
--r: 90;
}
.star--1 {
--x: 30;
--y: 90;
--d: 2.25;
}
.star--2 {
--x: 4;
--y: 51;
--d: 2;
}
.star--3 {
--x: 92;
--y: 49;
--d: 3;
}
.star--4 {
--x: 66;
--y: 92;
--d: 2.5;
}
@-webkit-keyframes pop-in {
from {
transform: translate(0, 100%);
}
}
@keyframes pop-in {
from {
transform: translate(0, 100%);
}
}
@-webkit-keyframes sparkle {
0%, 50%, 100% {
transform: scale(0) rotate(0);
}
25% {
transform: scale(1.2) rotate(450deg);
}
}
@keyframes sparkle {
0%, 50%, 100% {
transform: scale(0) rotate(0);
}
25% {
transform: scale(1.2) rotate(450deg);
}
}
@-webkit-keyframes grow {
from {
transform: translate(0, 100%);
}
}
@keyframes grow {
from {
transform: translate(0, 100%);
}
}
@-webkit-keyframes blink-open {
0%, 10%, 40%, 100% {
transform: scale(1);
}
25% {
transform: scale(0);
}
}
@keyframes blink-open {
0%, 10%, 40%, 100% {
transform: scale(1);
}
25% {
transform: scale(0);
}
}
@-webkit-keyframes blink-closed {
0%, 10%, 40%, 100% {
transform: scale(0);
}
25% {
transform: scale(1);
}
}
@keyframes blink-closed {
0%, 10%, 40%, 100% {
transform: scale(0);
}
25% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="leif">
<div class="leif__arch"></div>
<div class="leif__himself">
<div class="leif__container">
<div class="leif__body"></div>
<div class="leif__arm--left">
<div class="claw"></div>
<div class="claw"></div>
<div class="claw"></div>
</div>
<div class="leif__arm--right"></div>
<div class="leif__cap">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
<div class="leif__head">
<div class="leif__face">
<div class="leif__face-border">
<div></div>
<div></div>
<div></div>
</div>
<div class="leif__eye leif__eye--right">
<div>
<div></div>
<div></div>
</div>
</div>
<div class="leif__eye leif__eye--left">
<div>
<div></div>
<div></div>
</div>
</div>
<div class="leif__face-patch"></div>
<div class="leif__mouth">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="leif__mouth-patch"></div>
<div class="leif__nose"></div>
<div class="leif__cheek leif__cheek--left"></div>
<div class="leif__cheek leif__cheek--right"></div>
</div>
<div class="leif__eye-open leif__eye-open--left"></div>
<div class="leif__eye-open leif__eye-open--right"></div>
<div class="leif__eye-closed leif__eye-closed--left"></div>
<div class="leif__eye-closed leif__eye-closed--right"></div>
</div>
<div class="leif__pot">
<div class="flower__show">
<div class="flower__container">
<div class="flower flower--undefined">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
</div>
</div>
</div>
<div class="leif__forearm">
<div class="claw"></div>
<div class="claw"></div>
<div class="claw"></div>
</div>
</div>
</div>
<div class="leaf leaf--1">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--2">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--3">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--4">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--5">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--6">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--7">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--8">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--9">
<div></div>
<div></div>
<div></div>
</div>
<div class="leaf leaf--10">
<div></div>
<div></div>
<div></div>
</div>
<div class="flower flower--1">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower flower--2">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower flower--3">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower flower--4">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="flower flower--5">
<div class="flower__petal flower__petal--0">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__petal flower__petal--3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flower__core"></div>
</div>
<div class="star star--1"></div>
<div class="star star--2"></div>
<div class="star star--3"></div>
<div class="star star--4"></div>
</div>
<script>
const restart = () => {
const MARKUP = document.body.innerHTML
document.body.innerHTML = ''
requestAnimationFrame(() => (document.body.innerHTML = MARKUP))
}
document.body.addEventListener('click', restart)
</script>
</body>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: