[CSS]CSSアニメーションを使用したポップでキュートなボタン
Post on:2009年12月9日
sponsors
現在Safariのみに実装されているCSSアニメーションを使用して実装するボタンを紹介します。
上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。
Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。
個人的にはデザインはこれで充分のような気もします。
Firefoxでのキャプチャ
アニメーションのスタイルシートは下記のようになります。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } } </textarea> |
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> a.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } </textarea> |
sponsors
