画面が乱れているような表示

公開日:2019年04月23日

HTML+CSS

画面が乱れているような表示をさせる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
#box {
  height: 600px;
  background: #ccc;
}
#box:before {
    clip: rect(0, 9999px, 0, 0);
    animation: catchcopyNoise1 3s linear infinite;
    animation-fill-mode: both;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://jobtech.jp/wp-content/uploads/icon-150x150.jpg) no-repeat;
    background-size: cover;
    opacity: 1;
}
@-webkit-keyframes catchcopyNoise1 {
  0% {
    clip: rect(0, 9999px, 0, 0)
  }
  1% {
    clip: rect(80px, 9999px, 110px, 0)
  }
  2% {
    clip: rect(30px, 9999px, 65px, 0)
  }
  3% {
    clip: rect(100px, 9999px, 140px, 0)
  }
  5% {
    clip: rect(390px, 9999px, 450px, 0)
  }
  8% {
    clip: rect(250px, 9999px, 320px, 0)
  }
  10% {
    clip: rect(140px, 9999px, 180px, 0)
  }
  11% {
    clip: rect(400px, 9999px, 440px, 0)
  }
  12% {
    clip: rect(280px, 9999px, 310px, 0)
  }
  13% {
    clip: rect(0, 9999px, 0, 0)
  }
  32% {
    clip: rect(0, 9999px, 0, 0)
  }
  33% {
    clip: rect(45px, 9999px, 100px, 0)
  }
  35% {
    clip: rect(150px, 9999px, 200px, 0)
  }
  36% {
    clip: rect(0, 9999px, 0, 0)
  }
}
@keyframes catchcopyNoise1 {
  0% {
    clip: rect(0, 9999px, 0, 0)
  }
  1% {
    clip: rect(80px, 9999px, 110px, 0)
  }
  2% {
    clip: rect(30px, 9999px, 65px, 0)
  }
  3% {
    clip: rect(100px, 9999px, 140px, 0)
  }
  5% {
    clip: rect(390px, 9999px, 450px, 0)
  }
  8% {
    clip: rect(250px, 9999px, 320px, 0)
  }
  10% {
    clip: rect(140px, 9999px, 180px, 0)
  }
  11% {
    clip: rect(400px, 9999px, 440px, 0)
  }
  12% {
    clip: rect(280px, 9999px, 310px, 0)
  }
  13% {
    clip: rect(0, 9999px, 0, 0)
  }
  32% {
    clip: rect(0, 9999px, 0, 0)
  }
  33% {
    clip: rect(45px, 9999px, 100px, 0)
  }
  35% {
    clip: rect(150px, 9999px, 200px, 0)
  }
  36% {
    clip: rect(0, 9999px, 0, 0)
  }
}
@-webkit-keyframes catchcopyNoise2 {
  0% {
    clip: rect(0, 9999px, 0, 0)
  }
  1% {
    clip: rect(680px, 9999px, 710px, 0)
  }
  2% {
    clip: rect(630px, 9999px, 665px, 0)
  }
  3% {
    clip: rect(500px, 9999px, 540px, 0)
  }
  5% {
    clip: rect(890px, 9999px, 950px, 0)
  }
  9% {
    clip: rect(890px, 9999px, 950px, 0)
  }
  10% {
    clip: rect(700px, 9999px, 780px, 0)
  }
  11% {
    clip: rect(0, 9999px, 0, 0)
  }
  34% {
    clip: rect(0, 9999px, 0, 0)
  }
  35% {
    clip: rect(980px, 9999px, 1010px, 0)
  }
  36% {
    clip: rect(1045px, 9999px, 1180px, 0)
  }
  40% {
    clip: rect(9999px, 9999px, 9999px, 0)
  }
  41% {
    clip: rect(0, 9999px, 0, 0)
  }
}
@keyframes catchcopyNoise2 {
  0% {
    clip: rect(0, 9999px, 0, 0)
  }
  1% {
    clip: rect(680px, 9999px, 710px, 0)
  }
  2% {
    clip: rect(630px, 9999px, 665px, 0)
  }
  3% {
    clip: rect(500px, 9999px, 540px, 0)
  }
  5% {
    clip: rect(890px, 9999px, 950px, 0)
  }
  9% {
    clip: rect(890px, 9999px, 950px, 0)
  }
  10% {
    clip: rect(700px, 9999px, 780px, 0)
  }
  11% {
    clip: rect(0, 9999px, 0, 0)
  }
  34% {
    clip: rect(0, 9999px, 0, 0)
  }
  35% {
    clip: rect(980px, 9999px, 1010px, 0)
  }
  36% {
    clip: rect(1045px, 9999px, 1180px, 0)
  }
  40% {
    clip: rect(9999px, 9999px, 9999px, 0)
  }
  41% {
    clip: rect(0, 9999px, 0, 0)
  }
}
</style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

コンテンツ一覧

同じカテゴリーのコンテンツ