CSS3浴缸洗澡动画特效-优快云博客

<!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;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e0f7fa;
overflow: hidden;
font-family: Arial, sans-serif;
}

.bathroom {
position: relative;
width: 400px;
height: 400px;
background: #b3e5fc;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
overflow: hidden;
}

.bathtub {
position: absolute;
width: 300px;
height: 180px;
background: #4fc3f7;
bottom: 50px;
left: 50px;
border-radius: 0 0 30px 30px;
border: 10px solid #0288d1;
border-top: none;
overflow: hidden;
}

.water {
position: absolute;
width: 100%;
height: 80%;
background: #4fc3f7;
bottom: 0;
animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
0%, 100% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(-10px) scaleY(1.05);
}
}

.bubbles {
position: absolute;
width: 100%;
height: 100%;
}

.bubble {
position: absolute;
background: rgba(255,255,255,0.7);
border-radius: 50%;
animation: bubble-up 4s infinite;
}

@keyframes bubble-up {
0% {
transform: translateY(0) scale(0.5);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-150px) scale(1.2);
opacity: 0;
}
}

.rubber-duck {
position: absolute;
width: 60px;
height: 50px;
background: #ffeb3b;
border-radius: 50% 50% 40% 40%;
bottom: 40px;
left: 120px;
animation: duck-float 6s ease-in-out infinite;
}

.rubber-duck:before {
content: '';
position: absolute;
width: 20px;
height: 15px;
background: #ffc107;
border-radius: 50%;
top: -5px;
left: 20px;
}

.rubber-duck:after {
content: '';
position: absolute;
width: 8px;
height: 5px;
background: #000;
border-radius: 50%;
top: 15px;
left: 25px;
}

@keyframes duck-float {
0%, 100% {
transform: translateX(0) rotate(-5deg);
}
50% {
transform: translateX(30px) rotate(5deg);
}
}

.faucet {
position: absolute;
width: 20px;
height: 60px;
background: #78909c;
top: 50px;
right: 50px;
}

.faucet:before {
content: '';
position: absolute;
width: 40px;
height: 10px;
background: #78909c;
top: 0;
left: -10px;
border-radius: 5px;
}

.water-stream {
position: absolute;
width: 5px;
height: 40px;
background: rgba(79, 195, 247, 0.6);
top: 60px;
right: 52px;
animation: stream-flow 0.5s infinite;
}

@keyframes stream-flow {
0% {
height: 40px;
}
50% {
height: 50px;
}
100% {
height: 40px;
}
}

.link {
position: absolute;
bottom: 20px;
color: #0288d1;
text-decoration: none;
font-size: 14px;
opacity: 0.7;
transition: opacity 0.3s;
}

.link:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="bathroom">
<div class="faucet"></div>
<div class="water-stream"></div>
<div class="bathtub">
<div class="water">
<div class="bubbles">

</div>
</div>
<div class="rubber-duck"></div>
</div>
</div>