前端特效：仙境特效

原创已于 2025-06-27 13:56:19 修改 · 761 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-27 15:24:37 首次发布

<!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: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
height: 100vh;
font-family: 'Arial', sans-serif;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h1 {
font-size: 3em;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
z-index: 100;
}

p {
font-size: 1.5em;
max-width: 800px;
z-index: 100;
}

.fairy {
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
border-radius: 50%;
filter: blur(1px);
animation: float 15s infinite linear;
opacity: 0.7;
}

.butterfly {
position: absolute;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(255,215,0,0.7)" d="M50,10 C60,30 80,30 90,10 C80,30 90,50 70,50 C90,50 80,70 90,90 C80,70 60,70 50,90 C40,70 20,70 10,90 C20,70 10,50 30,50 C10,50 20,30 10,10 C20,30 40,30 50,10 Z"/></svg>');
background-size: contain;
animation: flutter 8s infinite ease-in-out;
}

.link {
position: fixed;
bottom: 20px;
color: white;
text-decoration: none;
font-size: 1.2em;
z-index: 100;
background: rgba(0,0,0,0.3);
padding: 10px 20px;
border-radius: 20px;
transition: all 0.3s;
}

.link:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}

@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translate(50px, 100px) rotate(90deg);
opacity: 0.9;
}
50% {
transform: translate(100px, 50px) rotate(180deg);
opacity: 0.5;
}
75% {
transform: translate(50px, 100px) rotate(270deg);
opacity: 0.8;
}
100% {
transform: translate(0, 0) rotate(360deg);
opacity: 0.7;
}
}

@keyframes flutter {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(50px, 30px) rotate(5deg);
}
50% {
transform: translate(100px, 10px) rotate(-5deg);
}
75% {
transform: translate(50px, 30px) rotate(5deg);
}
}

.mountain {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
z-index: 1;
}

.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
filter: blur(10px);
animation: drift 30s infinite linear;
z-index: 0;
}

@keyframes drift {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(calc(100vw + 100px));
}
}
</style>
</head>
<body>
<h1>仙境特效</h1>
<p>欢迎来到这个神奇的仙境世界，这里充满了梦幻的光点和飞舞的蝴蝶...</p>

<div class="mountain"></div>



<script>
// 创建仙女光点
function createFairies() {
const count = 30;
for (let i = 0; i < count; i++) {
const fairy = document.createElement('div');
fairy.className = 'fairy';
fairy.style.left = Math.random() * window.innerWidth + 'px';
fairy.style.top = Math.random() * window.innerHeight + 'px';
fairy.style.width = (Math.random() * 15 + 5) + 'px';
fairy.style.height = fairy.style.width;
fairy.style.animationDuration = (Math.random() * 10 + 10) + 's';
fairy.style.animationDelay = Math.random() * 5 + 's';
document.body.appendChild(fairy);
}
}

// 创建蝴蝶
function createButterflies() {
const count = 10;
for (let i = 0; i < count; i++) {
const butterfly = document.createElement('div');
butterfly.className = 'butterfly';
butterfly.style.left = Math.random() * window.innerWidth + 'px';
butterfly.style.top = Math.random() * window.innerHeight + 'px';
butterfly.style.transform = `scale(${Math.random() * 0.5 + 0.5})`;
butterfly.style.animationDuration = (Math.random() * 5 + 5) + 's';
butterfly.style.animationDelay = Math.random() * 3 + 's';
document.body.appendChild(butterfly);
}
}

// 创建云朵
function createClouds() {
const count = 5;
for (let i = 0; i < count; i++) {
const cloud = document.createElement('div');
cloud.className = 'cloud';
cloud.style.width = (Math.random() * 200 + 100) + 'px';
cloud.style.height = (Math.random() * 100 + 50) + 'px';
cloud.style.top = (Math.random() * 300) + 'px';
cloud.style.left = (Math.random() * window.innerWidth) + 'px';
cloud.style.opacity = Math.random() * 0.5 + 0.3;
cloud.style.animationDuration = (Math.random() * 20 + 30) + 's';
cloud.style.animationDelay = Math.random() * 10 + 's';
document.body.appendChild(cloud);
}
}

// 初始化所有元素
function init() {
createFairies();
createButterflies();
createClouds();
}

// 页面加载完成后初始化
window.addEventListener('load', init);

// 窗口大小改变时重新调整元素位置
window.addEventListener('resize', function() {
document.querySelectorAll('.fairy, .butterfly, .cloud').forEach(el => el.remove());
init();
});
</script>
</body>
</html>