如何使用纯css渐变来改善动画电视的静态效果

Question

如何使用css渐变来改善这种动画静态噪波效果？

只使用CSS，没有javascript，没有svg，没有图像，只使用渐变，并对其进行调整。

电视无信号噪声效果是我正在寻找的使用css梯度。

有人知道这种效果是如何改善的吗？

有更好的写法吗？

我正在寻找一种更准确的电视噪音效果。

我认为这种效果的书写方式可以改进。

有没有可以对它进行任何调整或调整，以便它更好地描绘电视噪音效果？

梯度可以是任何东西，只要它是一个梯度，什么类型都无关紧要。

这个使用径向梯度：

https://jsfiddle.net/xhdkza5w/

html,
body {
width: 100%;
height: 100%;
display: flex;
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation: back 5s linear infinite;
}
@keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}

<div class="tv-static"></div>

这个使用圆锥梯度：https://jsfiddle.net/bkx50apm/

html,
body {
width: 100%;
height: 100%;
display: flex;
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-conic-gradient(white, black 0.00085%);
animation: back 25s linear infinite;
}
@keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}

<div class="tv-static"></div>

Answer 1

你是说这种效果吗？

html,
body {
width: 100%;
height: 100%;
display: flex;
}

.animation {
width: 240px;
height: 240px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation: animation 5s linear infinite;
}
@keyframes animation {
from {
background-position: 0px 0px;
}
to {
background-position: 240px 240px;
}
}

<div class="animation"></div>

还是这种效果？

html,
body {
width: 100%;
height: 100%;
display: flex;
}

.animation {
width: 240px;
height: 240px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
background-position: center;
animation: back 5s linear infinite;
}
@keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}

<div class="animation"></div>

编辑：添加了background-position: center。

Answer 2

通过将其中的2个效果叠加在一起，并且每个div都有不同的动画，您可以在两者之间创建干扰，从而消除单个div只产生1个静态噪声的伪影。

这可能会有所改进，因为我不太精通css，但概念验证在中有效

html,
body {
width: 100%;
height: 100%;
display: flex;
}
.container_row {
display: flex;
}
.layer1 {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
.layer2 {
width: 100%;
margin-left: -100%;
background-color: rgba(255, 255, 255, 0.5);
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
}
.animation1 {
animation: back1 1s linear infinite;
}
.animation2 {
animation: back2 0.1s linear infinite;
}
@keyframes back1 {
from {
background-size: 100% 100%;
}
to {
background-size: 99% 100%;
}
}
@keyframes back2 {
from {
background-size: 48.56% 50%;
}
to {
background-size: 43.9% 50.1%;
}
}

<div class="layer1">
<div class="tv-static animation1"></div>
</div>
<div class="layer2">
<div class="tv-static animation2"></div>
</div>

Answer 3

使用平滑计时功能，动画不会产生这种效果，我们需要使用步长计时功能来产生这些突然变化的效果
解决方案1:我更改了动画。并且稍微调整了一下你的梯度。我认为使用梯度不是一个可靠的解决方案，因为浏览器的计算方式不同，分数、四舍五入会改变输出。你们使用的是径向梯度，看起来东西从放置的中心向外移动。你必须在每个平台和浏览器上测试他的，看看它是否看起来一样

解决方案2:使用SVG而不是渐变。feTurbulence过滤器提供噪波效果。您可以使用svg作为背景图像

解决方案3：使用相同动画的图像而不是渐变。使用image的优点是它在所有浏览器和屏幕上看起来都是一样的

解决方案3：简单使用的噪波gif图像。不需要动画。：(
在"整页"模式下查看以下内容：

body {
text-align: center;
}
.tv {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static {
position: absolute;
top: -200px;
left: -200px;
margin: auto;
height: 800px;
width: 800px;
background-image: repeating-radial-gradient(circle at 17% 132%, white 0.0005px, black 0.00085px);
animation: anim 1s steps(2, jump-both) infinite both;
transform: translate3d(0, 0, 0);
}

/******************************/
.tv0 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
isolation: isolate;
}
.tv-static0 {
position: absolute;
top: 0px;
left: 0px;
margin: auto;
height: 300%;
width: 300%;
animation: anim 1s steps(2, end) infinite both;
transform: translate3d(0, 0, 0);
filter: contrast(300%) brightness(50%);
}
.tv-static0 svg {
height: 200%;
width: 100%;
transform: scale(2.5);
}

/******************************/
.tv1 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static1 {
position: absolute;
top: -500px;
right: -500px;
bottom: -500px;
left: -500px;
margin: auto;
background-image: url(https://i.stack.imgur.com/uzEM4.png);
animation: anim 1s steps(2, end) infinite both;
transform: translate3d(0, 0, 0);
}

/******************************/
.tv2 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static2 {
position: absolute;
top: -500px;
right: -500px;
bottom: -500px;
left: -500px;
margin: auto;
background-image: url(https://i.stack.imgur.com/9Be02.gif);
transform: translate3d(0, 0, 0);
}
@keyframes anim {
0% {
transform: translateX(0px, 0px);
}
10% {
transform: translate(-100px, 100px);
}
20% {
transform: translate(150px, -100px);
}
30% {
transform: translate(-100px, 100px);
}
40% {
transform: translate(100px, -150px);
}
50% {
transform: translate(-100px, 200px);
}
60% {
transform: translate(-200px, -100px);
}
70% {
transform: translateY(50px, 100px);
}
80% {
transform: translate(100px, -150px);
}
90% {
transform: translate(0px, 200px);
}
100% {
transform: translate(-100px, 100px);
}
}

Your original code. modified. May not work on every browser.
<div class="tv">
<div class="tv-static"></div>
</div>
<br> Using SVG `feTurbulence` filter
<div class="tv0">
<div class="tv-static0">
<svg viewBox="0 0 200% 200%" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence type='turbulence' result='noise' baseFrequency='0.7' numOctaves='6' seed='2'
stitchTiles='noStitch' />
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>
<div class="overlay"></div>
</div>
</div>
<br>
<br> Animating image. Color TV
<div class="tv1">
<div class="tv-static1"></div>
</div>
<br> Using gif. No animation.
<div class="tv2">
<div class="tv-static2"></div>
</div>