CSSのみを使用して文字が光ったようなアニメーションを実装します。(IE非対応)
以下、参考にした資料。
・文字グラデーション
・バックグラウンドの位置変更
・CSSアニメーション
この3つの記事(機能)をベースに実装しました。
ちなみにFlashかと思ったのですが、たぶん違くて正式なアニメーションの名称が分かれば教えて欲しいです!
完成イメージ
コード
html
<divclass="back"><h1>~FlashTest~</h1></div>
css
.back{background-color:gray;width:100%;height:100vh;}h1{width:100%;font-size:50px;background:-webkit-linear-gradient(-30deg,black1%,white5%,black10%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-position:-200px;animation-name:flashText;animation-duration:1.5s;animation-timing-function:ease;animation-delay:0s;animation-iteration-count:1;animation-direction:normal;}@keyframesflashText{0%{background-position:-100px;}100%{background-position:300px;}}
これで出来るかと。ホームページのタイトル部分とかに使えそうですね^^