当前位置：首页 > article >正文

【css酷炫效果】纯CSS实现科技感网格背景

article 2025/3/25 23:01:52

【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>