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

devtools/2025/3/19 20:02:42/

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