网硕互联帮助中心<!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;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
font-family: Arial, sans-serif;
overflow: hidden;
}
.scene {
position: relative;
width: 800px;
height: 500px;
}
/* 电脑显示器 */
.computer {
position: absolute;
width: 300px;
height: 200px;
background: #16213e;
border-radius: 10px;
bottom: 150px;
left: 100px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.screen {
position: absolute;
width: 280px;
height: 180px;
background: #0f3460;
border-radius: 5px;
top: 10px;
left: 10px;
overflow: hidden;
}
.screen-content {
position: absolute;
width: 100%;
height: 100%;
color: #00ff9d;
font-family: 'Courier New', monospace;
padding: 10px;
box-sizing: border-box;
font-size: 12px;
line-height: 1.5;
}
.terminal-line {
margin: 0;
animation: typing 3s steps(40) infinite;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #00ff9d;
}
.computer-stand {
position: absolute;
width: 60px;
height: 40px;
background: #16213e;
bottom: -40px;
left: 120px;
}
.computer-base {
position: absolute;
width: 120px;
height: 10px;
background: #0f3460;
bottom: -50px;
left: 90px;
border-radius: 5px;
}
/* 服务器机架 */
.server-rack {
position: absolute;
width: 250px;
height: 300px;
background: #16213e;
border-radius: 10px;
bottom: 50px;
right: 100px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.server-unit {
position: relative;
width: 230px;
height: 50px;
background: #0f3460;
margin: 10px auto;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
}
.server-led {
width: 10px;
height: 10px;
border-radius: 50%;
background: #00ff9d;
animation: blink 1.5s infinite;
}
.server-led:nth-child(2) {
animation-delay: 0.5s;
}
.server-led:nth-child(3) {
animation-delay: 1s;
}
/* 连接线 */
.connection-line {
position: absolute;
height: 5px;
background: #00ff9d;
left: 400px;
top: 250px;
width: 0;
transform-origin: left center;
transform: rotate(-10deg);
z-index: 1;
box-shadow: 0 0 10px #00ff9d;
animation: connect 4s infinite;
}
.data-packet {
position: absolute;
width: 10px;
height: 10px;
background: #00ff9d;
border-radius: 50%;
left: 400px;
top: 250px;
opacity: 0;
box-shadow: 0 0 10px #00ff9d;
animation: send-data 4s infinite;
}
/* 动画定义 */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink {
0%, 100% { opacity: 0.2 }
50% { opacity: 1 }
}
@keyframes connect {
0% { width: 0 }
30% { width: 300px }
70% { width: 300px }
100% { width: 0 }
}
@keyframes send-data {
0% {
opacity: 0;
transform: translateX(0);
}
10% {
opacity: 1;
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(300px);
}
41% {
opacity: 0;
transform: translateX(300px);
}
100% {
opacity: 0;
transform: translateX(300px);
}
}
/* 版权信息 */
.copyright {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.copyright a {
color: #00ff9d;
text-decoration: none;
}
.copyright a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="scene">
<!– 电脑 –>
<div class="computer">
<div class="screen">
<div class="screen-content">
<p class="terminal-line">Connecting to server 192.168.1.100…</p>
<p class="terminal-line">Establishing secure connection…</p>
<p class="terminal-line">Transferring data packets…</p>
<p class="terminal-line">Connection successful!</p>
</div>
</div>
<div class="computer-stand"></div>
<div class="computer-base"></div>
</div>
<!– 服务器 –>
<div class="server-rack">
<div class="server-unit">
<div class="server-led"></div>
<div class="server-led"></div>
<div class="server-led"></div>
</div>
<div class="server-unit">
<div class="server-led"></div>
<div class="server-led"></div>
<div class="server-led"></div>
</div>
<div class="server-unit">
<div class="server-led"></div>
<div class="server-led"></div>
<div class="server-led"></div>
</div>
</div>
<!– 连接动画 –>
<div class="connection-line"></div>
<div class="data-packet"></div>
</div>
</body>
</html>
评论前必须登录！
注册