Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

背景色によって文字色が変わる、流れる文字のCSSアニメーション実現方法

$
0
0

はじめに

こんな感じのを実現するためのコードです。
slider-demo.gif

コード

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>流れる単語</title><linkrel="stylesheet"href="./index.css"/></head><body><divclass="color-area"><divclass="scroll-string scroll-string-white">流れる単語</div></div><divclass="scroll-string scroll-string-blue">流れる単語</div></body></html>
index.css
html{height:100%;}body{height:100%;}.color-area{width:100%;height:200px;top:100px;position:relative;overflow:hidden;background-color:darkblue;z-index:2;}.scroll-string{font-size:30px;visibility:hidden;text-align:center;height:50px;width:100%;position:absolute;left:0;right:0;margin:auto;}.scroll-string-white{color:white;top:0;animation:scroll-white5slinear0s1forwards;-webkit-animation:scroll-white5slinear0s1forwards;z-index:3;}.scroll-string-blue{color:darkblue;top:100;animation:scroll-blue5slinear0s1forwards;-webkit-animation:scroll-blue5slinear0s1forwards;z-index:1;}@keyframesscroll-white{0%{transform:translateY(-100px);visibility:visible;}100%{transform:translateY(300px);}}@keyframesscroll-blue{0%{transform:translateY(-200px);visibility:visible;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;transform:translateY(200px);}}

ポイント

白い文字と青い文字を重ねて同時にアニメーションさせています。レイヤー構造は上から順に

  • 白い文字
  • 青い背景
  • 青い文字
  • 白い背景

となっています。その際、青い背景をoverflow: hiddenとすることで白い文字を青い背景の上のみで表示させます。

おわりに

もっと効率的の良い書き方があるかもしれません。


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>