どうも7noteです。CSSで流れる文字の作り方。

きれいな液晶パネルが増えてきたので、電光掲示板のようなものは少し減ってきたのかな？と思いますが、電光掲示板にあるような右から左に流れる文字をCSSで再現する方法です。

こんなやつ

ソース

index.html

<div class="text">
<p>次は〜〇〇駅 次は〜〇〇駅 開く扉にご注意ください。</p>
</div>

style.css

.text {
  width : 300px;      /* 枠の大きさ */
  border: solid 1px; /* 枠線 */
  padding: 3px;        /* 枠線の内側の余白 */
  overflow : hidden; /* 枠からはみ出た部分を非表示 */
}
.text p{
  display : inline-block;  /* 必須 */
  padding-left: 100%;    /* 右端から文字をスタートさせるため */
  white-space : nowrap; /* 改行が起こらないように対策 */
  line-height : 1em;         /* 行間（高さ）を1文字分にする */
  animation : scroll 10s linear infinite; /* 下のアニメーションを10秒かけて行い、それをくりかえす */
}

/* アニメーション（右から左に移動） */
@keyframes scroll{
  0% { 
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}