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

【css酷炫效果】纯CSS实现黑白电视故障雪花

news 来源：原创 2025/5/26 3:42:48

【css酷炫效果】纯CSS实现黑白电视故障雪花

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492002

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构


<div class="tv-effect">
  <div class="noise-layer"></div>
  <div class="scanline"></div>
</div>

css样式

.tv-effect {
  position: relative;
  width: 600px;
  height: 400px;
  background: #000;
  overflow: hidden;
}

/* 噪声层 */
.noise-layer {
  position: absolute;
  margin: -200px;;
  width: 200%;
  height: 200%;
  animation: noise 0.9s infinite steps(5);
  mix-blend-mode: screen;
}

.noise-layer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-radial-gradient(#000 0 0.2%, #fff 0 0.8%),
    repeating-linear-gradient(transparent 0 3%, #fff 0 5%);
  background-size: 200px 200px;
  opacity: 0.3;
}


@keyframes noise {
  0% { transform: translate(10%, 15%); }
  20% { transform: translate(-5%, 20%); }
  40% { transform: translate(12%, -10%); }
  60% { transform: translate(-8%, 5%); }
  100% { transform: translate(0); }
}

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<!DOCTYPE html>
<style>
.tv-effect {
  position: relative;
  width: 600px;
  height: 400px;
  background: #000;
  overflow: hidden;
}

/* 噪声层 */
.noise-layer {
  position: absolute;
  margin: -200px;;
  width: 200%;
  height: 200%;
  animation: noise 0.9s infinite steps(5);
  mix-blend-mode: screen;
}

.noise-layer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-radial-gradient(#000 0 0.2%, #fff 0 0.8%),
    repeating-linear-gradient(transparent 0 3%, #fff 0 5%);
  background-size: 200px 200px;
  opacity: 0.3;
}


@keyframes noise {
  0% { transform: translate(10%, 15%); }
  20% { transform: translate(-5%, 20%); }
  40% { transform: translate(12%, -10%); }
  60% { transform: translate(-8%, 5%); }
  100% { transform: translate(0); }
}

</style>


</head>
<body>

<div class="tv-effect">
  <div class="noise-layer"></div>
  <div class="scanline"></div>
</div>

</body>
</html>