猎豹橙色大巴动态背景特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148956448

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猎豹橙色大巴动态背景特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FF8C00; /* 橙色背景 */
font-family: Arial, sans-serif;
}

#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.bus {
position: absolute;
width: 200px;
height: 80px;
background-color: #FF4500;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bus:before {
content: "";
position: absolute;
top: 15px;
left: -20px;
width: 40px;
height: 50px;
background-color: #FF4500;
border-radius: 5px;
}

.bus:after {
content: "";
position: absolute;
bottom: -10px;
left: 20px;
width: 40px;
height: 20px;
background-color: #333;
border-radius: 50%;
}

.window {
position: absolute;
top: 15px;
width: 30px;
height: 30px;
background-color: #87CEEB;
border-radius: 5px;
}

.wheel {
position: absolute;
bottom: -15px;
width: 30px;
height: 30px;
background-color: #333;
border-radius: 50%;
border: 5px solid #666;
}

.cheetah {
position: absolute;
width: 60px;
height: 30px;
background-color: #FFD700;
border-radius: 15px;
}

.cheetah:before {
content: "";
position: absolute;
top: -10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #FFD700;
border-radius: 50%;
}

.cheetah-spot {
position: absolute;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
}

.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-align: center;
z-index: 10;
}

/* 隐藏的网址样式 - 不会在页面显示 */
.hidden-url {
display: none;
}
</style>
</head>
<body>
<div id="background"></div>
<div class="title">猎豹橙色大巴动态特效</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 创建大巴
function createBus() {
const bus = $('<div class="bus"></div>');
const startX = -200;
const startY = Math.random() * ($(window).height() - 100);

// 添加车窗
for (let i = 0; i < 4; i++) {
const window = $('<div class="window"></div>');
window.css({
left: 40 + i * 40,
});
bus.append(window);
}

// 添加轮子
for (let i = 0; i < 2; i++) {
const wheel = $('<div class="wheel"></div>');
wheel.css({
left: 30 + i * 120,
});
bus.append(wheel);
}

bus.css({
left: startX,
top: startY,
});

$('#background').append(bus);

// 动画效果
bus.animate({
left: $(window).width() + 200,
}, 10000 + Math.random() * 5000, 'linear', function() {
$(this).remove();
createBus();
});
}

// 创建猎豹
function createCheetah() {
const cheetah = $('<div class="cheetah"></div>');
const startX = Math.random() * $(window).width();
const startY = Math.random() * $(window).height();

// 添加斑点
for (let i = 0; i < 8; i++) {
const spot = $('<div class="cheetah-spot"></div>');
spot.css({
left: 5 + Math.random() * 50,
top: 5 + Math.random() * 20,
});
cheetah.append(spot);
}

cheetah.css({
left: startX,
top: startY,
});

$('#background').append(cheetah);

// 动画效果
const duration = 2000 + Math.random() * 3000;
const newX = startX + (Math.random() * 400 - 200);
const newY = startY + (Math.random() * 200 - 100);

cheetah.animate({
left: newX,
top: newY,
}, duration, function() {
if (Math.random() > 0.3) {
createCheetah();
$(this).remove();
} else {
animateCheetah($(this));
}
});
}

function animateCheetah(cheetah) {
const currentX = parseInt(cheetah.css('left'));
const currentY = parseInt(cheetah.css('top'));
const duration = 1000 + Math.random() * 2000;
const newX = currentX + (Math.random() * 200 - 100);
const newY = currentY + (Math.random() * 100 - 50);

// 确保猎豹不会跑出屏幕
const boundedX = Math.max(0, Math.min($(window).width() - 60, newX));
const boundedY = Math.max(0, Math.min($(window).height() - 30, newY));

cheetah.animate({
left: boundedX,
top: boundedY,
}, duration, function() {
if (Math.random() > 0.7) {
$(this).remove();
createCheetah();
} else {
animateCheetah($(this));
}
});
}

// 初始创建
for (let i = 0; i < 3; i++) {
createBus();
}

for (let i = 0; i < 5; i++) {
createCheetah();
}

// 定期创建新的大巴和猎豹
setInterval(createBus, 8000);
setInterval(createCheetah, 3000);

// 窗口大小调整时重新定位元素
$(window).resize(function() {
$('.bus, .cheetah').each(function() {
const $el = $(this);
const currentLeft = parseInt($el.css('left'));
const currentTop = parseInt($el.css('top'));

$el.css({
left: Math.min(currentLeft, $(window).width()),
top: Math.min(currentTop, $(window).height())
});
});
});
});
</script>
</body>
</html>