流れるテキストをcssで

html

<p class="info-title">
<span>ホームページを公開しました。テキストが長い時のダミーテキストです。スマホの時に流れます。</span>
</p>

css

.info-title{
  overflow: hidden;
  white-space: nowrap;
  width:100%;
}
.info-title span{
  display:inline-block;
  margin:0;
  padding:0;
}
.info-meta.active .info-title span{
  animation: hscroll 20s linear infinite;
}
@keyframes hscroll {
  0% {transform: translateX(100%);}
  100% {transform: translateX(-100%);}
}

関連記事

コメント

この記事へのコメントはありません。

TOP