摇尾巴的小狗 - CSS3动画-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摇尾巴的小狗 - CSS3动画</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
overflow: hidden;
}

.dog {
position: relative;
width: 200px;
height: 150px;
}

/* 狗头 */
.head {
position: absolute;
width: 100px;
height: 80px;
background-color: #d4a76a;
border-radius: 50px 50px 40px 40px;
top: 30px;
left: 50px;
z-index: 10;
}

/* 耳朵 */
.ear {
position: absolute;
width: 30px;
height: 40px;
background-color: #b88a4a;
border-radius: 15px;
top: 10px;
}

.ear.left {
left: 45px;
transform: rotate(-30deg);
}

.ear.right {
right: 45px;
transform: rotate(30deg);
}

/* 眼睛 */
.eye {
position: absolute;
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
top: 50px;
}

.eye.left {
left: 65px;
}

.eye.right {
right: 65px;
}

/* 鼻子 */
.nose {
position: absolute;
width: 15px;
height: 10px;
background-color: #333;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
top: 60px;
left: 50%;
transform: translateX(-50%);
}

/* 身体 */
.body {
position: absolute;
width: 120px;
height: 80px;
background-color: #d4a76a;
border-radius: 40px;
top: 80px;
left: 40px;
z-index: 5;
}

/* 腿 */
.leg {
position: absolute;
width: 15px;
height: 40px;
background-color: #b88a4a;
bottom: 0;
}

.leg.front.left {
left: 50px;
}

.leg.front.right {
left: 85px;
}

.leg.back.left {
left: 65px;
}

.leg.back.right {
left: 100px;
}

/* 尾巴 */
.tail {
position: absolute;
width: 15px;
height: 50px;
background-color: #b88a4a;
border-radius: 5px;
right: 30px;
top: 80px;
transform-origin: bottom center;
animation: wag 0.5s infinite alternate ease-in-out;
z-index: 1;
}

@keyframes wag {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}

/* 引用链接样式 */
.link {
position: absolute;
bottom: 20px;
font-family: Arial, sans-serif;
color: #333;
text-decoration: none;
}
</style>
</head>
<body>
<div class="dog">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
</div>
<div class="body"></div>
<div class="leg front left"></div>
<div class="leg front right"></div>
<div class="leg back left"></div>
<div class="leg back right"></div>
<div class="tail"></div>
</div>

</body>
</html>