所有分类
  • 所有分类
  • 后端开发
当前位置： 正文
分享一个纯CSS3实现的绘制动画效果：可爱宠物

分享一个纯CSS3实现的绘制动画效果：可爱宠物

2023-05-13 技术资讯 推广
今天在国外一个网站看到一个不错的CSS效果，一个纯CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下： 废话不多说，直接上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

今天在国外一个网站看到一个不错的CSS效果，一个纯CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下：

1.jpg

废话不多说，直接上代码。 

<!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://www.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>

原文链接：https://www.icz.com/technicalinformation/web/html/2023/05/9534.html，转载请注明出处~~~
赏 0

猜你喜欢

深入探讨CSS3 transition使用规范
技术资讯

CSS3 transition，制作CSS3动画的基本要素，我们必须掌握的基本知识，今天主...
2023-06-05
【SVG】谈谈SVG中的雪碧图Sprite
技术资讯

Sprite(雪碧图)在Web运用中已不是新技术，但大部分同学都还停留在位图的Sprite运...
2023-06-05
谈谈关于CSS&CSS3中伪类选择器的应用
技术资讯

提到"伪类选器"，在平时的项目中用的太多了，比如:link，:focus，:hover，:af...
2023-06-05
【SVG】SVG中的结构化、分组和引用元素
技术资讯

SVG有自己结构化文档的方式。通过某些SVG元素，我们可以在文档中定义、分组以及引...
2023-06-05
【SVG】欣赏和学习SVG滤镜的艺术
技术资讯

经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离...
2023-06-05
【SVG】教你给SVG 的内容添加CSS样式
技术资讯

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<u...
2023-06-02
首页 发现 VIP 我的
注意：请收藏好网址www.icz.com，防止失联！站内免费资源持续上传中…！赞助我们
显示验证码
没有账号？注册  忘记密码？