mix-blend-modeを使ったブラウン管テレビの再現エフェクト

mix-blend-modeを使うと要素を重ねたときにペイントツールのレイヤー合成モードのような表現ができる。 たとえば、オーバーレイ、乗算、覆い焼きなど。

<div class="img">
  <div class="layer1"></div>
  <div class="layer2"></div>
</div>

<style>
.img {
  overflow: hidden;
  position: relative;
}
.layer1 {
  background-image: ...
}
.layer2 {
  position: absolute;
  top: 0;
  left: 0;
  /* linear-gradient で走査線っぽいパターンを作成 */
  animation: 0.1s linear infinite scroll;
}
</style>