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

.container {
position: relative;
width: 300px;
height: 400px;
}

.jar {
position: absolute;
width: 200px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
bottom: 0;
left: 50px;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 2;
}

.liquid {
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
animation: liquid-move 8s infinite ease-in-out;
}

.liquid::before {
content: '';
position: absolute;
width: 120%;
height: 100%;
left: -10%;
background: linear-gradient(90deg,
#ff3366,
#ff6633,
#ffcc33,
#33cc33,
#3399ff,
#9933ff);
border-radius: 40% 40% 0 0;
animation: liquid-shape 12s infinite ease-in-out;
}

.bubbles {
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
}

.bubble {
position: absolute;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: bubble-rise 8s infinite ease-in;
}

.bubble:nth-child(1) {
width: 15px;
height: 15px;
left: 30px;
bottom: 50px;
animation-delay: 0.5s;
}

.bubble:nth-child(2) {
width: 10px;
height: 10px;
left: 80px;
bottom: 30px;
animation-delay: 1.5s;
}

.bubble:nth-child(3) {
width: 8px;
height: 8px;
left: 120px;
bottom: 70px;
animation-delay: 2.5s;
}

.bubble:nth-child(4) {
width: 12px;
height: 12px;
left: 60px;
bottom: 90px;
animation-delay: 3.5s;
}

.bubble:nth-child(5) {
width: 6px;
height: 6px;
left: 150px;
bottom: 40px;
animation-delay: 4.5s;
}

@keyframes liquid-move {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(-3deg);
}
75% {
transform: rotate(4deg);
}
}

@keyframes liquid-shape {
0%, 100% {
border-radius: 40% 40% 0 0;
transform: rotate(0deg);
}
25% {
border-radius: 50% 30% 0 0;
transform: rotate(5deg);
}
50% {
border-radius: 35% 45% 0 0;
transform: rotate(-5deg);
}
75% {
border-radius: 45% 35% 0 0;
transform: rotate(3deg);
}
}

@keyframes bubble-rise {
0% {
transform: translateY(0) scale(1);
opacity: 0.6;
}
50% {
transform: translateY(-100px) scale(1.2);
opacity: 0.8;
}
100% {
transform: translateY(-200px) scale(0.8);
opacity: 0;
}
}

.label {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size: 24px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
z-index: 4;
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: white;
text-decoration: none;
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s ease;
}

.custom-link:hover {
background: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="label">彩色泥状液体</div>
<div class="jar">
<div class="liquid"></div>
<div class="bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</div>
</div>

</body>
</html>