科幻传送门特效-优快云博客

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

<!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;
padding: 0;
background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

.portal-container {
position: relative;
width: 300px;
height: 300px;
}

.portal {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, #00f7ff 0%, #0066ff 50%, #0033aa 100%);
box-shadow: 0 0 50px #00f7ff, 0 0 100px #0066ff;
animation: portal-pulse 3s infinite alternate;
}

.portal-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 50%;
background: radial-gradient(circle, #0033aa 0%, #000033 70%);
animation: inner-spin 20s linear infinite;
}

.portal-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #00ffff 100%);
filter: blur(5px);
animation: core-pulse 2s infinite alternate;
}

.particle {
position: absolute;
border-radius: 50%;
background-color: #00ffff;
filter: blur(2px);
animation: particle-float linear infinite;
}

@keyframes portal-pulse {
0% { box-shadow: 0 0 50px #00f7ff, 0 0 100px #0066ff; }
100% { box-shadow: 0 0 70px #00f7ff, 0 0 140px #0066ff, 0 0 180px #0033aa; }
}

@keyframes inner-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes core-pulse {
0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes particle-float {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(0);
opacity: 0;
}
}

.energy-ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 247, 255, 0.3);
animation: energy-expand 4s infinite ease-out;
opacity: 0;
}

@keyframes energy-expand {
0% {
transform: scale(0.8);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}

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

.footer a {
color: #00f7ff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="portal-container">
<div class="portal"></div>
<div class="portal-inner"></div>
<div class="portal-core"></div>
</div>

<div class="footer">

</div>

<script>
// 创建粒子效果
function createParticles() {
const portal = document.querySelector('.portal-container');
const particleCount = 30;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';

// 随机属性
const size = Math.random() * 5 + 2;
const x = Math.random() * 300;
const y = Math.random() * 300;
const duration = Math.random() * 3 + 2;
const delay = Math.random() * 5;

// 随机移动方向
const tx = (Math.random() - 0.5) * 200;
const ty = (Math.random() - 0.5) * 200;

particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `${delay}s`;
particle.style.setProperty('--tx', `${tx}px`);
particle.style.setProperty('--ty', `${ty}px`);

portal.appendChild(particle);
}
}

// 创建能量环
function createEnergyRings() {
const portal = document.querySelector('.portal-container');
const ringCount = 3;

for (let i = 0; i < ringCount; i++) {
const ring = document.createElement('div');
ring.className = 'energy-ring';
ring.style.animationDelay = `${i * 1.5}s`;
portal.appendChild(ring);
}
}

// 页面加载后初始化效果
window.addEventListener('load', () => {
createParticles();
createEnergyRings();

// 每隔一段时间重新创建粒子，保持动态效果
setInterval(() => {
const particles = document.querySelectorAll('.particle');
particles.forEach(p => p.remove());
createParticles();
}, 5000);
});
</script>
</body>
</html>