<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
height: 100vh;
perspective: 1000px;
}
.space {
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
/* 星星效果 */
.stars {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
}
.star {
position: absolute;
background: #fff;
border-radius: 50%;
animation: twinkle var(--duration) infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* 太空船 */
.spaceship {
position: absolute;
width: 120px;
height: 60px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
animation: float 6s infinite ease-in-out;
}
.spaceship-body {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #1a237e, #283593);
border-radius: 50% 50% 20% 20%;
box-shadow: 0 0 20px rgba(66, 165, 245, 0.5);
}
.spaceship-cockpit {
position: absolute;
width: 40px;
height: 30px;
background: rgba(144, 202, 249, 0.7);
border-radius: 50%;
top: 10px;
left: 40px;
box-shadow: 0 0 15px rgba(144, 202, 249, 0.8);
}
.spaceship-wing {
position: absolute;
width: 80px;
height: 20px;
background: linear-gradient(90deg, #0d47a1, #1565c0);
border-radius: 10px;
bottom: -10px;
}
.spaceship-wing.left {
left: -30px;
transform: rotate(-20deg);
}
.spaceship-wing.right {
right: -30px;
transform: rotate(20deg);
}
.spaceship-engine {
position: absolute;
width: 30px;
height: 15px;
background: #ff6d00;
border-radius: 15px 15px 0 0;
bottom: -15px;
left: 45px;
animation: engineGlow 0.5s infinite alternate;
}
@keyframes engineGlow {
0% { box-shadow: 0 0 5px #ff6d00; }
100% { box-shadow: 0 0 20px #ff6d00, 0 0 30px #ff9100; }
}
@keyframes float {
0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
50% { transform: translate(-50%, -50%) rotate(2deg); }
}
/* 行星 */
.planet {
position: absolute;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
animation: rotate var(--duration) linear infinite;
}
.planet-1 {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #3e2723, #5d4037);
top: 10%;
left: 10%;
--duration: 60s;
}
.planet-2 {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #1a237e, #283593);
bottom: 15%;
right: 15%;
--duration: 40s;
}
.planet-3 {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #b71c1c, #c62828);
top: 30%;
right: 20%;
--duration: 30s;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 流星 */
.meteor {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px 2px #fff;
animation: meteorFall var(--duration) linear infinite;
opacity: 0;
}
@keyframes meteorFall {
0% {
transform: translate(var(--startX), var(--startY)) rotate(45deg);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translate(var(--endX), var(--endY)) rotate(45deg);
opacity: 0;
}
}
/* 小行星带 */
.asteroid-belt {
position: absolute;
width: 500px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: rotate 120s linear infinite;
}
.asteroid {
position: absolute;
width: var(--size);
height: var(--size);
background: linear-gradient(45deg, #3e2723, #5d4037);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: rotate var(--duration) linear infinite reverse;
}
/* 下载按钮 */
.download-container {
position: fixed;
bottom: 50px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 100;
}
.download-btn {
padding: 15px 30px;
background: linear-gradient(45deg, #ff6d00, #ff9100);
color: white;
border: none;
border-radius: 50px;
font-size: 18px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 109, 0, 0.4);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.download-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 109, 0, 0.6);
}
.download-btn:active {
transform: translateY(1px);
}
.download-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.5s ease;
z-index: -1;
}
.download-btn:hover:before {
left: 100%;
}
/* 标题 */
.title {
position: fixed;
top: 50px;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size: 3rem;
text-shadow: 0 0 10px rgba(66, 165, 245, 0.8);
z-index: 100;
animation: titleGlow 3s infinite alternate;
}
@keyframes titleGlow {
0% { text-shadow: 0 0 10px rgba(66, 165, 245, 0.8); }
100% { text-shadow: 0 0 20px rgba(66, 165, 245, 1), 0 0 30px rgba(144, 202, 249, 0.8); }
}
/* 版权信息 */
.copyright {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
z-index: 100;
}
.copyright a {
color: rgba(144, 202, 249, 0.8);
text-decoration: none;
transition: all 0.3s ease;
}
.copyright a:hover {
color: #42a5f5;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="space">
<div class="stars" id="stars"></div>
<div class="planet planet-1"></div>
<div class="planet planet-2"></div>
<div class="planet planet-3"></div>
<div class="asteroid-belt" id="asteroid-belt"></div>
<div class="meteors" id="meteors"></div>
<div class="spaceship">
<div class="spaceship-body"></div>
<div class="spaceship-cockpit"></div>
<div class="spaceship-wing left"></div>
<div class="spaceship-wing right"></div>
<div class="spaceship-engine"></div>
</div>
</div>
<h1 class="title">星际动画特效</h1>
<div class="download-container">
<button class="download-btn">下载特效代码</button>
</div>
<div class="copyright">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 创建星星
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.classList.add('star');
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.width = `${Math.random() * 3 + 1}px`;
star.style.height = star.style.width;
star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
starsContainer.appendChild(star);
}
// 创建流星
const meteorsContainer = document.getElementById('meteors');
for (let i = 0; i < 5; i++) {
const meteor = document.createElement('div');
meteor.classList.add('meteor');
const startX = `${Math.random() * 100 + 50}%`;
const startY = `${Math.random() * 100 - 100}%`;
const endX = `${Math.random() * 100 - 100}%`;
const endY = `${Math.random() * 100 + 100}%`;
meteor.style.setProperty('--startX', startX);
meteor.style.setProperty('--startY', startY);
meteor.style.setProperty('--endX', endX);
meteor.style.setProperty('--endY', endY);
meteor.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);
meteor.style.animationDelay = `${Math.random() * 10}s`;
meteorsContainer.appendChild(meteor);
}
// 创建小行星带
const asteroidBelt = document.getElementById('asteroid-belt');
for (let i = 0; i < 20; i++) {
const asteroid = document.createElement('div');
asteroid.classList.add('asteroid');
const angle = Math.random() * Math.PI * 2;
const distance = 200 + Math.random() * 50;
const x = 250 + Math.cos(angle) * distance;
const y = 100 + Math.sin(angle) * distance;
asteroid.style.left = `${x}px`;
asteroid.style.top = `${y}px`;
asteroid.style.setProperty('--size', `${Math.random() * 10 + 5}px`);
asteroid.style.setProperty('--duration', `${Math.random() * 30 + 20}s`);
asteroidBelt.appendChild(asteroid);
}
// 下载按钮功能
const downloadBtn = document.querySelector('.download-btn');
downloadBtn.addEventListener('click', function() {
// 创建虚拟下载链接
const element = document.createElement('a');
const fileContent = document.documentElement.outerHTML;
const file = new Blob([fileContent], {type: 'text/html'});
element.href = URL.createObjectURL(file);
element.download = '星际动画特效.html';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
// 按钮动画反馈
downloadBtn.textContent = '下载完成!';
setTimeout(() => {
downloadBtn.textContent = '下载特效代码';
}, 2000);
});
});
</script>
</body>
</html>
扫一扫
4627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
