html模仿电视机效果,[转载] 利用css制作电视雪花屏特效

1.编写html文件

Tv Noise Effect

2.制作噪点图片

打开PS，新建一张图片(这里选择设置图片像素大小为400x400)。设置图片背景色为黑色，点确定。

1.png

选择添加杂色滤镜

2.png

调节数量为120，选择高斯分布，勾选单色，点确定。(数量指的是该滤镜添加的杂色数量，原本背景为黑色，数量越大越多杂色会替换掉黑色。在勾选单色的情况下，可以理解成数量越大对比度越高)

3.png

按下键盘 Alt+Shift+Ctrl+S 将图片保存为Web格式，选择保存图片类型为JPEG，点击储存。

4.png

3.编写css文件

body

{

margin: 0;

padding: 0;

background: url(noise.jpg);

animation: animate .5s steps(10) infinite;

}

@keyframes animate

{

0%

{

background-position: 0 0;

}

100%

{

background-position: 100% 100%;

}

}

利用动画效果来模拟电视雪花屏的特效