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

CSSのみで文字をキラーンとさせる方法

$
0
0

CSSのみを使用して文字が光ったようなアニメーションを実装します。(IE非対応)
以下、参考にした資料。
文字グラデーション
バックグラウンドの位置変更
CSSアニメーション

この3つの記事(機能)をベースに実装しました。
ちなみにFlashかと思ったのですが、たぶん違くて正式なアニメーションの名称が分かれば教えて欲しいです!

完成イメージ

flashImage.png
※gitは後で乗せます。

コード

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;}}

これで出来るかと。ホームページのタイトル部分とかに使えそうですね^^


Viewing all articles
Browse latest Browse all 8591

Trending Articles



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