Как улучшить анимированный статический эффект телевизора с помощью чистого градиента css

ProgramBox

Как улучшить анимированный статический эффект телевизора с помощью чистого градиента css

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#css #css-animations #gradient #noise

#css #css-анимации #градиент #шум

Вопрос:

Как я мог бы улучшить этот анимированный эффект статического шума, используя градиент 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>

Развернуть фрагмент

Ответ №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 .

1. Вероятно, второе, кстати, очень хорошо сделано.

2. Существует огромная проблема с этой 2-й анимацией, анимация не остается посередине. Он не остается центрированным посередине.

Ответ №2:

Накладывая 2 из этих эффектов друг на друга, и каждый div имеет разную анимацию, вы можете создавать помехи между ними, которые устраняют артефакты, связанные с наличием только 1 статического шума, создаваемого одним div.

Это может быть улучшено, поскольку я не очень хорошо разбираюсь в 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>

Развернуть фрагмент

Ответ №3:

С функцией плавной синхронизации анимации не дают такого эффекта, нам нужно использовать функцию пошаговой синхронизации, чтобы придать эффект внезапного изменения.
Решение 1: Я изменил анимацию. И немного изменил ваш градиент. Я думаю, что использование градиента не является надежным решением, потому что браузеры выполняют вычисления по-разному, а дроби, округление изменяют вывод. Вы используете радиальный градиент, и кажется, что все выходит наружу из центра размещения. Вам придется протестировать его на каждой платформе и в каждом браузере, чтобы увидеть, выглядит ли он одинаково.

Решение 2: вместо градиента используется SVG. Фильтр feTurbulence создает эффект шума. Вы можете использовать svg в качестве фонового изображения.

Решение 3: вместо градиента использовалось изображение с той же анимацией. Преимущество использования изображения в том, что оно будет выглядеть одинаково во всех браузерах и на экранах.

Решение 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>

Развернуть фрагмент

Метки: Как улучшить статический эффект анимированного телевизора с помощью чистого градиента css