星評価にアニメーションを実装できるスタイルシート「Starability」

2017/01/10

こんにちは。
今回は星評価にアニメーションを実装できるスタイルシート「Starability」です。

レーディングスターにアクセシビリティーを考慮したアニメーションを実装できるCSSライブラリを紹介します。

星評価にアニメーションを実装できるスタイルシート「Starability」

Starability

starability

 

「Starability」をダウンロードしてみよう!

https://github.com/LunarLogic/starabilityにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「Starability」を設置してみよう!

starability-all.min.cssをhead内に読み込みます。

 

html部分を記述します。
アニメーションなしのデフォルトの場合はstarability-basicというクラス名を付けますよ。

 

starability-basicの他にもstarability-slot、starability-grow、starability-growRotate、starability-fade、starability-checkmarkの6種類あります。
最後にstarability-imagesという画像の入ったフォルダをコピペすれば完了ですよ。

 

CSSシークレット ―47のテクニックでCSSを自在に操る
CSSシークレット ―47のテクニックでCSSを自在に操る

 

いかがでしたか。星評価におもしろい効果を出したい時に便利ですね。
以上で星評価にアニメーションを実装できるスタイルシート「Starability」でした。

topへ戻る