原子结构模型动画特效

原创已于 2025-06-27 11:23:15 修改 · 492 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-17 13:48:27 首次发布

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

.atom {
position: relative;
width: 300px;
height: 300px;
}

.nucleus {
position: absolute;
width: 60px;
height: 60px;
background: radial-gradient(circle, #ff4757, #e84118);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px #ff4757;
z-index: 1;
}

.orbit {
position: absolute;
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.orbit:nth-child(2) {
width: 200px;
height: 200px;
animation: rotate 20s linear infinite;
}

.orbit:nth-child(3) {
width: 250px;
height: 250px;
animation: rotate-reverse 25s linear infinite;
}

.orbit:nth-child(4) {
width: 150px;
height: 150px;
animation: rotate 15s linear infinite reverse;
}

.electron {
position: absolute;
width: 12px;
height: 12px;
background: #1e90ff;
border-radius: 50%;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 15px #1e90ff;
}

.electron::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: #70a1ff;
border-radius: 50%;
top: 3px;
left: 3px;
animation: pulse 2s ease-in-out infinite alternate;
}

.orbit:nth-child(2) .electron {
animation: electron-pulse 3s ease-in-out infinite alternate;
}

.orbit:nth-child(3) .electron {
animation: electron-pulse 4s ease-in-out infinite alternate-reverse;
}

.orbit:nth-child(4) .electron {
animation: electron-pulse 2.5s ease-in-out infinite alternate;
}

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

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

@keyframes electron-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 0 15px #1e90ff;
}
100% {
transform: translate(-50%, -50%) scale(1.3);
box-shadow: 0 0 25px #1e90ff;
}
}

@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
100% {
transform: scale(1.5);
opacity: 0.3;
}
}

/* 粒子效果 */
.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}

.particle {
position: absolute;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
animation: float 15s linear infinite;
}

.particle:nth-child(1) {
width: 3px;
height: 3px;
top: 20%;
left: 10%;
animation-delay: 0s;
}

.particle:nth-child(2) {
width: 2px;
height: 2px;
top: 60%;
left: 80%;
animation-delay: 2s;
}

.particle:nth-child(3) {
width: 4px;
height: 4px;
top: 30%;
left: 50%;
animation-delay: 4s;
}

.particle:nth-child(4) {
width: 1px;
height: 1px;
top: 80%;
left: 30%;
animation-delay: 6s;
}

.particle:nth-child(5) {
width: 3px;
height: 3px;
top: 40%;
left: 90%;
animation-delay: 8s;
}

@keyframes float {
0% {
transform: translate(0, 0);
opacity: 0;
}
10% {
opacity: 0.5;
}
90% {
opacity: 0.5;
}
100% {
transform: translate(100px, -100px);
opacity: 0;
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="atom">
<div class="nucleus"></div>

<div class="orbit">
<div class="electron"></div>
</div>

<div class="orbit">
<div class="electron"></div>
</div>

<div class="orbit">
<div class="electron"></div>
</div>

<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
</div>


</body>
</html>