【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>
效果图
