科幻風格的CSS代碼以其未來感和太空元素的設計為特色。以下是一些常見的科幻CSS代碼：

/*顏色變換動畫*/
@keyframes glowing {
0% { background-color: #E54B4B; box-shadow: 0 0 3px #E54B4B; }
50% { background-color: #FF8C00; box-shadow: 0 0 15px #FF8C00; }
100% { background-color: #E54B4B; box-shadow: 0 0 3px #E54B4B; }
}
.button {
background-color: #E54B4B;
border: none;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
animation: glowing 3000ms infinite;
}
/*太空背景*/
body {
background-image: url('space-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/*懸浮動畫*/
.main-content:hover {
transform: scale(1.1);
transition: 0.5s;
}
/*透明度動畫*/
.fade-in {
opacity: 0;
animation: fadeIn ease-in 1;
animation-fill-mode: forwards;
animation-duration: 3s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*字體動畫*/
@keyframes neon {
from {
text-shadow: 0 0 50px #fff, 0 0 10px #fff, 0 0 2px #ff00de, 0 0 5px #ff00de, 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 40px #ff00de;
}
to {
text-shadow: 0 0 50px #fff, 0 0 10px #fff, 0 0 2px #e600ac, 0 0 5px #e600ac, 0 0 10px #e600ac, 0 0 20px #e600ac, 0 0 40px #e600ac;
}
}
h1 {
animation: neon 2s ease-in-out infinite alternate;
}

這些代碼可用于創建超現實的網站和特效，將用戶帶入未來世界的舞臺。使用這些代碼時，可以為您的網站添加動態太空效果、流光字體、懸浮放大等功能。科幻CSS將使您的網站在許多其他網站中脫穎而出，增加用戶的興趣和參與感。