文字を七色レインボーカラー(虹色)にして左から右に色が流れるアニメーションの動きも付けちゃうCSS

他のブログみたくSEOやアフィリエイトを意識したグダグダ解説はウザいので結論から!

目次

サンプル

レインボーカラーのアニメーション文字だよ

HTML

<div class="tx-color-animation">レインボーカラーのアニメーション文字だよ</div>

CSS

.tx-color-animation {
    font-family: 'Hedvig Letters Serif', serif;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background: linear-gradient(to right, #e60000, #f39800, #fff100, #009944, #0068b7, #3498db, #920783);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: moveGradient 5s linear infinite;
}
@keyframes moveGradient {
    0% { background-position: 100%; }
    100% { background-position: -100%; }
}

感想

以上、コピペして使ってみてね~。
かんたんに書いてるけど、これ作るのに1時間はかかったんで大切にしてねw
ググる → 解説ブログのコピペして試したけどダメ ☓ 3回 → 勉強する → ChatGPT4Vと何度も対話 → できた!
もうね、ChatGPT4V大先生に何度救われていることか。
ChatGPT4V大先生がいなければ、絶対にこのカラー文字アニメーションは俺には制作できなかったね、うん。

マジでChatGPT3.5の無料使っているやつはアホ
まぁ、ChatGPT使っていないヤツよりはマシだけどさ。
もうね、雲泥の差。
月とスッポン、ウンコとケーキくらい違う

仕事でChatGPT使っていないヤツはもう論外だね。
使うシーンがないって言う人たくさんいるけれど・・・いやいや、そんなシーン逆にないからw
使おうと思えば、どんな仕事でも使って効率化生産性アップできます、確実に!
効果的な使い方をただあなたは知らないだけ。

まぁライバルが減って俺には好都合だから良いんだけどさw
もうChatGPT4Vの進化スピードったらないよ!
本当にすごい、革命的な知能を持つよ。

月額20ドル=3000円で最強の相方と24時間会話コンサルできるなんて、すごすぎ。
こうしてどんどん格差が生まれるんだろうな~
AI使いとAI使えない格差ね。

ということで、ChatGPT4Vのおかげで七色文字色アニメーションのCSSを作れましたとさ。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

売れる仕組みを創り、Webで売上アップさせる
株式会社WebSanta 代表取締役
 
幼少期、何も誇れる能力も無く、自分に自信が無い日々を過ごす。
小中高校時代、父の3億の借金、生死をさまよう交通事故、大火傷、彼女の死にも遭う。
それらをキッカケに「たった一度の人生、悔いなく生きたい!」と心に決める。
しかし、大学時代、バレンタインデーに当時の彼女にフラれ、自殺しようと銃社会アメリカに渡るもシリコンバレーのIT革命に魅せられ帰国。
 
ケンブリッジ大学語学留学、東京理科大学経営学部経営学科、すごい起業塾、ビジネスコンテスト優勝を経て、株式会社WebSantaを設立。
総額600万円の詐欺やうつ病に遭いながらも、起業12年・相談1000人・サイト制作100件・セミナー100回・総売上3億に貢献。
 
使命は「起業家に未来を届ける」
ビジョンは「Webマーケティングで起業家のビジネスを革新させる」
夢は「悲しい倒産を無くす」こと。

コメント

コメントする

目次