jQuery橙汁水汽泡动画特效-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery橙汁水汽泡动画特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #FFA500 0%, #FF8C00 100%);
height: 100vh;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 100%;
height: 100%;
}

.glass {
position: absolute;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50% 50% 10% 10%;
border: 8px solid rgba(255, 255, 255, 0.5);
bottom: 50px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.juice {
position: absolute;
width: 100%;
height: 80%;
background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8) 0%, rgba(255, 140, 0, 0.9) 100%);
bottom: 0;
border-radius: 50% 50% 0 0;
}

.bubble {
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
filter: blur(2px);
animation: bubble-float 4s infinite ease-in;
}

@keyframes bubble-float {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(-300px) scale(0.5);
opacity: 0;
}
}

.footer {
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}

.footer a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}

.title {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">清凉橙汁汽泡特效</h1>
<div class="glass">
<div class="juice"></div>
</div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 创建汽泡
function createBubble() {
const size = Math.random() * 20 + 5;
const posX = Math.random() * 260 + 20;
const delay = Math.random() * 3;
const duration = Math.random() * 3 + 2;

const bubble = $('<div class="bubble"></div>').css({
width: size + 'px',
height: size + 'px',
left: posX + 'px',
bottom: '20px',
animationDelay: delay + 's',
animationDuration: duration + 's'
});

$('.glass').append(bubble);

// 动画结束后移除汽泡
setTimeout(function() {
bubble.remove();
}, (duration + delay) * 1000);
}

// 初始创建一些汽泡
for (let i = 0; i < 15; i++) {
setTimeout(createBubble, i * 300);
}

// 持续创建汽泡
setInterval(createBubble, 500);

// 点击杯子增加汽泡
$('.glass').click(function() {
for (let i = 0; i < 10; i++) {
setTimeout(createBubble, i * 100);
}
});

// 鼠标移动改变背景颜色
$(document).mousemove(function(e) {
const x = e.pageX / $(window).width();
const y = e.pageY / $(window).height();

const hue = 30 + x * 10; // 橙色调色范围
const saturation = 80 + y * 20;

$('body').css('background',
`linear-gradient(to bottom, hsl(${hue}, ${saturation}%, 50%) 0%, hsl(${hue-10}, ${saturation}%, 45%) 100%)`);
});
});
</script>
</body>
</html>