.cyberphone-container {
float: right;
width: 300px;
margin: 20px;
position: relative;
animation: change 15s infinite;
}
.cyberphone-screen {
background: rgba(0,0,0,0.9);
border-radius: 15px;
padding: 10px;
position: relative;
overflow: hidden;
}
.hologram-frame {
background: linear-gradient(45deg, rgba(0,255,255,0.2), rgba(255,0,255,0.2));
padding: 5px;
border-radius: 10px;
animation: hologram 3s infinite;
}
.scanline {
position: absolute;
height: 2px;
background: linear-gradient(to right, rgba(0, 255, 255, 0), rgba(0, 255, 255, 0.53), rgba(0, 255, 255, 0));
animation: scan 3s linear infinite;
top: 0;
left: 0;
right: 0;
}
.cyberphone-body {
background: radial-gradient(circle at 50% 0%, #1a1a1a, #000);
border-radius: 0 0 20px 20px;
padding: 15px;
border-top: 3px solid #00ffff;
}
.cyber-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
text-align: center;
}
.cyber-title {
padding: 8px;
background: linear-gradient(to right, #002, #006);
text-transform: uppercase;
letter-spacing: 2px;
}
.cyber-th {
color: #00ffff
}
.cyber-td {
color: white
}
.glow-text {
color: #00ffff;
text-shadow: 0 0 5px #00ffff;
}
.data-row {
transition: transform 0.3s;
}
.data-row:hover {
transform: translateX(5px);
}
.neon-border {
border: 1px solid #00ffff;
box-shadow: 0 0 8px #00ffff;
}
@keyframes hologram {
0%,100% { opacity: 1.0; }
50% { opacity: 0.8; }
}
@keyframes scan {
0% { transform: translateY(-500px); }
100% { transform: translateY(1000px); }
}
@keyframes change {
6.67% {filter: drop-shadow(0 0 8px #FF9D0F)}
13.33% {filter: drop-shadow(0 0 8px #10B9EC)}
20% {filter: drop-shadow(0 0 8px #A2D10C)}
26.67% {filter: drop-shadow(0 0 8px #FFC5FF)}
33.33% {filter: drop-shadow(0 0 8px #5BFFC6)}
40% {filter: drop-shadow(0 0 8px #C48EFF)}
46.67% {filter: drop-shadow(0 0 8px #000000)}
53.33% {filter: drop-shadow(0 0 8px #C0A96B)}
60% {filter: drop-shadow(0 0 8px #D4D4D4)}
66.67% {filter: drop-shadow(0 0 8px #FF0002)}
73.33% {filter: drop-shadow(0 0 8px #005CFF)}
80% {filter: drop-shadow(0 0 8px #FFC600)}
86.67% {filter: drop-shadow(0 0 8px #006349)}
93.33% {filter: drop-shadow(0 0 8px #FF632F)}
100% {filter: drop-shadow(0 0 8px #402D51)}
}
/* [[分类:在模板名字空间下的CSS页面]] */