【テキストが横に流れるcss】ブログタイトル下の文字に実装させる

バナー（リンクなし）

バナー（リンクあり）

こちらの記事を参考とさせていただきました。

テキストが横に流れるCSSを使用して、ブログタイトル下の文字をスクロールさせてみたいと思います。以下がコードと説明です。

テキストが横に流れるCSSの実装方法:

HTMLの適切な場所に以下のようなコードを追加します。ここでは、<div> 要素でテキストを囲み、クラス名を付けています。

html

<div class="flowing-text"> ここに流れるテキストを入力してください。 </div>

CSSを使用して、テキストが横に流れる効果を適用します。

css

.flowing-text {
    white-space: nowrap; /* テキストを折り返さないように設定 */
    overflow: hidden; /* 要素外にはみ出す部分を隠す */
    animation: flow 10s linear infinite; /* テキストが流れるアニメーションを適用 */
}
@keyframes flow {
    0% { transform: translateX(100%); } /* 初期位置を要素の幅分右にずらす */
    100% {
    transform: translateX(-100%); } /* テキストが要素の幅を超えて左へ流れる */
}