文字が右から左に流れる


1 文字が流れる
本日は、「文字が流れる」方法を紹介します。

お~い! 待ってくれ~ 


👆上のテキストが右から左へと流れています。
簡単な事例なので、ぜひ使ってみてください。
以下に、ソースを紹介します。

glass-1379822_1920.jpg
PezibearによるPixabayからの画像(流れのイメージで使いました)




2 ソースです
HTMLのソース
<p class="marquee-anim">
<span>(ここに流したいテキスト文が入る)</span>
</p>



CSSのソース
.marquee-anim {
  overflow: hidden;
  color: rgb(51,51,51); 
}

.marquee-anim span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

なお、このCSSのソースは、<style>~</style>の間に記述(コピペ)することを忘れないでね。
記述場所は、ブログの記事中のどこでもOKです。(自分でわかりやすい場所に)
ちなみに、この記事では、「2 ソースです」のすぐ上に記述しました。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 68

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • winga

    おはようございます。
    わー!楽しい!流れてる!!
    やりたい。。。けれど(-_-;)

    あ、わけいさん。私の横に来てください<(_ _)>
    2020年01月24日 06:38
  • フラバーバ

    色々 面白いことが出来るのですね。
    私も wingaさんと 同じ気持ちですよ。
    2020年01月25日 10:35
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    気付くのが遅くなりました。
    非推奨ですが、<marquee>タグを使うといとも簡単に実現できます。
    その方法は、次の記事で紹介していますので、ぜひ参照してくださいね。
    具体的には、そこのコメント欄に書きました。
    2020年01月25日 10:43
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。
    wingaさんのコメントと同様なので・・・
    非推奨ですが、<marquee>タグを使うといとも簡単に実現できます。
    その方法は、次の記事で紹介していますので、ぜひ参照してくださいね。具体的には以下で表現できます。

    <marquee>
    <span>ここに(右→左)に流したいテキストを入れる</span>
    </marquee>

    以上です。
    2020年01月25日 10:50