抖动天空特效

用JS和CSS实现抖动天空特效

原创已于 2025-06-27 15:28:26 修改 · 261 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #开发语言

于 2025-04-30 14:53:41 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抖动天空特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1e90ff 0%, #87cefa 100%);
height: 100vh;
position: relative;
}

.cloud {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
filter: blur(5px);
}

.sun {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, #ffff00 30%, #ff8c00 100%);
border-radius: 50%;
top: 20%;
left: 15%;
box-shadow: 0 0 50px #ffff00;
}

.link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: Arial, sans-serif;
text-decoration: none;
font-size: 14px;
z-index: 100;
}
</style>
</head>
<body>
<div class="sun"></div>




<script>
// 创建云朵
function createClouds() {
const cloudCount = 15;
for (let i = 0; i < cloudCount; i++) {
const cloud = document.createElement('div');
cloud.className = 'cloud';

// 随机大小
const size = Math.random() * 100 + 50;
cloud.style.width = `${size}px`;
cloud.style.height = `${size * 0.6}px`;

// 随机位置
cloud.style.left = `${Math.random() * 100}%`;
cloud.style.top = `${Math.random() * 70}%`;

document.body.appendChild(cloud);
}
}

// 抖动效果
function shakeSky() {
const intensity = 2;
const x = (Math.random() - 0.5) * intensity;
const y = (Math.random() - 0.5) * intensity;

document.body.style.transform = `translate(${x}px, ${y}px)`;

// 云朵轻微移动
const clouds = document.querySelectorAll('.cloud');
clouds.forEach(cloud => {
const cloudX = (Math.random() - 0.5) * 1;
const cloudY = (Math.random() - 0.5) * 1;
const currentLeft = parseFloat(cloud.style.left);
const currentTop = parseFloat(cloud.style.top);

cloud.style.left = `${currentLeft + cloudX * 0.05}%`;
cloud.style.top = `${currentTop + cloudY * 0.05}%`;
});

requestAnimationFrame(shakeSky);
}

// 初始化
window.onload = function() {
createClouds();
setTimeout(() => {
shakeSky();
}, 1000);
};
</script>
</body>
</html>