如图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>❀</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<style>
:root {
--bg-color: #ffcccc;
--fur: #33292b;
--inner-ear: #d36149;
--eye: #ddb54d;
--eyeball: #030303;
--eyelight: #fafafa;
--nose: #d3918e;
--heart: #dc4053;
}
html,
body {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
background-color: var(--bg-color);
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.cat {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.cat1 {
position: relative;
left: -93%;
top: 125px;
transform: translate(-50%, -50%);
}
.cat3 {
position: relative;
left: -93%;
top: 125px;
transform: translate(-50%, -30%);
}
.face {
background-color: var(--fur);
width: 200px;
height: 164px;
border-radius: 50%;
position: absolute;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.ear-left,
.ear-right {
width: 0;
height: 0;
border-bottom: 60px solid var(--fur);
border-left: 42px solid transparent;
border-right: 42px solid transparent;
position: relative;
}
.ear-left {
bottom: 30px;
transform: rotate(-35deg);
animation-name: an-ears;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes an-ears {
from {
top: -15px;
}
to {
top: -30px;
}
}
@keyframes ear-dance-right {
from {
top: -75px;
}
to {
top: -88px;
}
}
.ear-right {
bottom: 90px;
left: 125px;
transform: rotate(35deg);
animation-name: ear-dance-right;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
.inner-l {
width: 0;
height: 0;
right: 27px;
border-bottom: 45px solid var(--inner-ear);
border-left: 27px solid transparent;
position: relative;
}
.inner-r {
width: 0;
height: 0;
border-bottom: 45px solid var(--inner-ear);
border-right: 27px solid transparent;
position: relative;
}
.eye-left,
.eye-right {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--eye);
position: relative;
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.eye-left {
bottom: 65px;
left: 45px;
}
.eye-right {
bottom: 105px;
left: 125px;
}
.eye-ball {
width: 30px;
height: 30px;
background-color: var(--eyeball);
position: relative;
border-radius: 50%;
top: 4px;
left: 5px;
}
.eye-light {
width: 5px;
height: 5px;
background-color: var(--eyelight);
position: relative;
border-radius: 50%;
top: 8px;
left: 12px;
}
.shadow-light {
width: 7px;
height: 7px;
background-color: #fefefe;
position: relative;
border-radius: 50%;
top: -2px;
left: 20px;
}
.nose {
width: 20px;
height: 18px;
background-color: var(--nose);
border-radius: 49% 51% 50% 50% / 10% 10% 90% 90%;
position: relative;
bottom: 103px;
left: 96px;
}
.l1,
.l2 {
background-color: var(--nose);
height: 16px;
width: 1px;
position: relative;
}
.l1 {
transform: rotate(45deg);
left: 4px;
top: 14px;
}
.l2 {
transform: rotate(-45deg);
left: 14px;
top: -2px;
}
.cat-body {
background-color: var(--fur);
width: 210px;
height: 200px;
position: relative;
top: 118px;
transform: skew(10deg, 10deg);
left: 51px;
/* transform: rotateX(48deg); */
/* transform-origin: 10px; */
/* transform-origin: 15px; */
border-radius: 25% 80% 100% 0% / 25% 100% 0% 100%;
}
.paw1,
.paw2 {
background-color: var(--fur);
height: 22px;
width: 33px;
position: relative;
top: 198px;
border-radius: 0% 100% 49% 51% / 0% 0% 100% 100%;
}
.paw2 {
top: 177px;
left: 60px;
}
.tail {
background-color: var(--fur);
width: 168px;
height: 25px;
position: relative;
top: 96px;
left: 197px;
border-radius: 0 20px 20px 0;
/* transform: rotate(-25deg); */
transform: translateX(-50%);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.nams {
background-color: #fff;
height: 10px;
width: 10px;
border-radius: 50%;
bottom: 55px;
left: 99px;
position: absolute;
transform: rotate(45deg);
/* animation: beat 2s infinite; */
}
.lingdai {
/* transform: rotate(45deg); */
transform: rotate(30deg);
position: absolute;
width: 150px;
left: -41px;
height: 50px;
top: 6px;
}
.heart {
background-color: var(--heart);
height: 100px;
width: 100px;
bottom: 280px;
left: 15px;
position: absolute;
/* transform: rotate(145deg); */
transform: rotate(55deg) translateY(-10px) translateX(-10px);
/* animation: beat 2s infinite; */
}
.heart-ln,
.heart-rn {
background-color: #ddb54d;
height: 13px;
width: 13px;
position: relative;
border-radius: 50px 50px 0 0;
}
.heart-ln {
bottom: 67px;
position: relative;
}
.heart-rn {
bottom: 63px;
right: 51px;
transform: rotate(-90deg);
}
.heart-l,
.heart-r {
background-color: var(--heart);
height: 70px;
width: 100px;
position: relative;
border-radius: 150px 150px 0 0;
}
.heart-l {
bottom: 45px;
position: relative;
}
.heart-r {
bottom: 55px;
right: 60px;
transform: rotate(-90deg);
}
.heart-r::before {
position: relative;
top: 100px;
left: 50px;
font-size: 10px;
transform: rotate(-15deg);
color: #fff;
}
@keyframes beat {
0% {
transform: scale(0.75) rotate(55deg);
opacity: 1;
}
5%,
15%,
25% {
transform: scale(1) rotate(55deg);
}
10%,
20% {
transform: scale(0.75) rotate(55deg);
}
70% {
opacity: 1;
}
100% {
transform: rotate(55deg) translateY(-10px) translateX(-10px);
opacity: 0;
}
}
</style>
<body>
<div class="container">
<!-- 左边 -->
<div
class="cat cat1 animate__animated animate__zoomInLeft animate__delay-1s"
style="left: -55%; top: 187px"
>
<div class="face">
<div class="ear-left"><div class="inner-l"></div></div>
<div class="ear-right"><div class="inner-r"></div></div>
<div class="eye-left">
<div class="eye-ball">
<div class="eye-light"></div>
<div class="shadow-light"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-ball">
<div class="eye-light"></div>
<div class="shadow-light"></div>
</div>
</div>
<div class="nose">
<div class="l1"></div>
<div class="l2"></div>
</div>
</div>
<div class="cat-body" style="transform: rotateY(139deg); left: -18px">
<div class="paw1"></div>
<div class="paw2"></div>
<div class="tail" style=" top: 115px;
left: 260px;"></div>
</div>
<div
class="nams animate__animated animate__zoomInRight animate__delay-3s"
style="transform: rotate(56deg); left: 84px; bottom: -44px"
>
<div class="lingdai">
<div class="heart-rn" style="background-color: #d36149"></div>
<div class="heart-rn" style="background-color: #ddb54d"></div>
<div class="heart-rn" style="background-color: blueviolet"></div>
<div
class="heart-rn"
style="background-color: cornflowerblue"
></div>
<div class="heart-rn" style="background-color: magenta"></div>
<div class="heart-rn" style="background-color: darkseagreen"></div>
<div class="heart-rn" style="background-color: darkred"></div>
<div class="heart-rn" style="background-color: blue"></div>
<div class="heart-rn" style="background-color: yellowgreen"></div>
</div>
</div>
</div>
<!-- 右边 -->
<div
class="cat animate__animated animate__zoomInRight animate__delay-2s"
style="left: 119%"
>
<div class="face">
<div class="ear-left"><div class="inner-l"></div></div>
<div class="ear-right"><div class="inner-r"></div></div>
<div class="eye-left">
<div class="eye-ball">
<div class="eye-light"></div>
<div class="shadow-light"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-ball">
<div class="eye-light"></div>
<div class="shadow-light"></div>
</div>
</div>
<div class="nose">
<div class="l1"></div>
<div class="l2"></div>
</div>
</div>
<div class="cat-body">
<div class="paw1"></div>
<div class="paw2"></div>
<div
class="tail animate__animated animate__jello animate__infinite"
></div>
</div>
<div
class="nams animate__animated animate__zoomInRight animate__delay-3s"
style="left: 104px; bottom: -44px"
>
<div class="lingdai">
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
<div class="heart-rn"></div>
</div>
</div>
</div>
<div class="abs animate__animated animate__bounceInDown animate__delay-3s">
<div class="heart ">
<div class="heart-l"></div>
<div class="heart-r"></div>
</div>
</div>
</div>
</body>
</html>