猫咪桌上睡觉CSS3动画特效

原创已于 2025-06-27 11:15:31 修改 · 541 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-19 13:33:05 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猫咪桌上睡觉CSS3动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
overflow: hidden;
font-family: Arial, sans-serif;
}

.scene {
position: relative;
width: 800px;
height: 500px;
}

/* 桌子 */
.desk {
position: absolute;
bottom: 100px;
width: 600px;
height: 20px;
background: linear-gradient(to right, #8B4513 0%, #A0522D 50%, #8B4513 100%);
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.desk-leg {
position: absolute;
width: 20px;
height: 100px;
background: linear-gradient(to bottom, #8B4513 0%, #A0522D 100%);
bottom: 0;
}

.desk-leg.left {
left: 50px;
}

.desk-leg.right {
right: 50px;
}

/* 猫咪 */
.cat {
position: absolute;
width: 200px;
height: 150px;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
}

.cat-body {
position: absolute;
width: 180px;
height: 100px;
background: #FFA500;
border-radius: 50% 50% 40% 40%;
bottom: 0;
left: 10px;
box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.1);
}

.cat-head {
position: absolute;
width: 120px;
height: 100px;
background: #FFA500;
border-radius: 50%;
bottom: 70px;
left: 40px;
z-index: 2;
box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.1);
}

.cat-ear {
position: absolute;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #FF8C00;
z-index: 1;
}

.cat-ear.left {
top: -10px;
left: 10px;
transform: rotate(-20deg);
}

.cat-ear.right {
top: -10px;
right: 10px;
transform: rotate(20deg);
}

.cat-ear-inner {
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #FFD700;
top: 10px;
left: -10px;
}

.cat-eye {
position: absolute;
width: 20px;
height: 10px;
background: #333;
border-radius: 50%;
top: 40px;
animation: blink 4s infinite;
}

.cat-eye.left {
left: 30px;
}

.cat-eye.right {
right: 30px;
}

.cat-nose {
position: absolute;
width: 10px;
height: 8px;
background: #FF69B4;
border-radius: 50%;
top: 60px;
left: 55px;
}

.cat-mouth {
position: absolute;
width: 30px;
height: 15px;
border-bottom: 2px solid #333;
border-radius: 0 0 50% 50%;
top: 70px;
left: 45px;
}

.cat-paw {
position: absolute;
width: 40px;
height: 30px;
background: #FFA500;
border-radius: 50%;
bottom: -10px;
z-index: -1;
}

.cat-paw.left {
left: 20px;
animation: paw-move-left 3s infinite;
}

.cat-paw.right {
right: 20px;
animation: paw-move-right 3s infinite;
}

.cat-tail {
position: absolute;
width: 100px;
height: 20px;
background: #FF8C00;
border-radius: 10px;
bottom: 30px;
right: -60px;
transform-origin: left center;
animation: tail-wag 5s infinite;
}

/* 呼吸动画 */
.cat-body, .cat-head {
animation: breathe 3s infinite;
}

/* Zzz气泡 */
.zzz {
position: absolute;
color: #FFF;
font-size: 24px;
font-weight: bold;
opacity: 0;
animation: zzz 3s infinite;
}

.zzz:nth-child(1) {
top: -20px;
left: 80px;
animation-delay: 0.5s;
}

.zzz:nth-child(2) {
top: -40px;
left: 100px;
animation-delay: 1s;
}

.zzz:nth-child(3) {
top: -30px;
left: 120px;
animation-delay: 1.5s;
}

/* 动画定义 */
@keyframes breathe {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

@keyframes blink {
0%, 45%, 55%, 100% {
height: 10px;
transform: translateY(0);
}
50% {
height: 2px;
transform: translateY(4px);
}
}

@keyframes paw-move-left {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(10deg);
}
}

@keyframes paw-move-right {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(-10deg);
}
}

@keyframes tail-wag {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}

@keyframes zzz {
0% {
opacity: 0;
transform: translateY(0);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-30px);
}
}

/* 窗外阳光 */
.sunbeam {
position: absolute;
width: 300px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
transform: rotate(45deg);
top: 100px;
left: -100px;
animation: sunbeam 8s infinite;
}

@keyframes sunbeam {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.1;
}
}

/* 版权信息 */
.copyright {
position: absolute;
bottom: 10px;
right: 10px;
color: #333;
font-size: 12px;
}

.copyright a {
color: #333;
text-decoration: none;
}

.copyright a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="scene">

<div class="sunbeam"></div>


<div class="desk">
<div class="desk-leg left"></div>
<div class="desk-leg right"></div>
</div>


<div class="cat">
<div class="cat-tail"></div>
<div class="cat-body"></div>
<div class="cat-head">
<div class="cat-ear left">
<div class="cat-ear-inner"></div>
</div>
<div class="cat-ear right">
<div class="cat-ear-inner"></div>
</div>
<div class="cat-eye left"></div>
<div class="cat-eye right"></div>
<div class="cat-nose"></div>
<div class="cat-mouth"></div>
</div>
<div class="cat-paw left"></div>
<div class="cat-paw right"></div>


<div class="zzz">Zzz</div>
<div class="zzz">Zzz</div>
<div class="zzz">Zzz</div>
</div>


</div>
</body>
</html>