斜め線のアニメーション

<div class="diagonal-lines"></div>

/* 斜め線の背景を定義 */
.diagonal-lines {
  width: 100%;
  height: 100px;
  background: linear-gradient(135deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  animation: moveDiagonal 5s linear infinite;
}

/* 背景を斜めに移動させるアニメーションを定義 */
@keyframes moveDiagonal {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 40px;
  }
}

MORE POSTS