【css酷炫效果】純CSS實現科技感網格背景
- 緣
- 創作背景
- html結構
- css樣式
- 完整代碼
- 基礎版
- 進階版(3D光線掃描版)
- 效果圖
想直接拿走的老板，鏈接放在這里：上傳后更新
緣
創作隨緣，不定時更新。
創作背景
剛看到csdn出活動了，趕時間，直接上代碼。
html結構
<div class="grid"></div>
css樣式
:root {--grid-color: rgba(0, 255, 136, 0.15); /* 科技青色 */--grid-speed: 40s; /* 動畫速度 */
}body {margin: 0;height: 100vh;overflow: hidden;background: #0f0f1a; /* 深空藍底色 */position: relative;
}/* 主網格層 */
.grid {position: absolute;width: 200%;height: 200%;background:repeating-linear-gradient(90deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin),repeating-linear-gradient(0deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin);animation: move var(--grid-speed) linear infinite;
}/* 動態光效層 */
.grid::after {content: '';position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg,rgba(0,255,136,0) 0%,rgba(0,255,136,0.3) 50%,rgba(0,255,136,0) 100%);
}@keyframes move {100% { transform: translate(-50%, -50%); }
}
完整代碼
基礎版
<!DOCTYPE html>
<html>
<head>
<style>
:root {--grid-color: rgba(0, 255, 136, 0.15); /* 科技青色 */--grid-speed: 40s; /* 動畫速度 */
}body {margin: 0;height: 100vh;overflow: hidden;background: #0f0f1a; /* 深空藍底色 */position: relative;
}/* 主網格層 */
.grid {position: absolute;width: 200%;height: 200%;background:repeating-linear-gradient(90deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin),repeating-linear-gradient(0deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin);animation: move var(--grid-speed) linear infinite;
}/* 動態光效層 */
.grid::after {content: '';position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg,rgba(0,255,136,0) 0%,rgba(0,255,136,0.3) 50%,rgba(0,255,136,0) 100%);
}@keyframes move {100% { transform: translate(-50%, -50%); }
}</style>
</head>
<body><div class="grid"></div>
</body>
</html>
進階版(3D光線掃描版)
<!DOCTYPE html>
<html>
<head>
<style>
:root {--grid-color: rgba(0, 255, 136, 0.15); /* 科技青色 */--grid-speed: 40s; /* 動畫速度 */
}body {margin: 0;height: 100vh;overflow: hidden;background: #0f0f1a; /* 深空藍底色 */position: relative;
}/* 主網格層 */
.grid {position: absolute;width: 200%;height: 200%;background:repeating-linear-gradient(90deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin),repeating-linear-gradient(0deg,transparent 0,transparent 5vmin,var(--grid-color) 5vmin,var(--grid-color) 6vmin);animation: move var(--grid-speed) linear infinite;
}/* 動態光效層 */
.grid::after {content: '';position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg,rgba(0,255,136,0) 0%,rgba(0,255,136,0.3) 50%,rgba(0,255,136,0) 100%);animation: shine calc(var(--grid-speed)*0.5) ease-in-out infinite;
}@keyframes move {100% { transform: translate(-50%, -50%); }
}@keyframes shine {0% { transform: translateX(-100%); }100% { transform: translateX(100%); }
}
body {perspective: 1000px;
}.grid {transform: translate(-50%, -50%)rotateX(60deg)translateZ(100px);
}
</style>
</head>
<body><div class="grid"></div>
</body>
</html>
效果圖
)
