エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
第18回 飛び出す数字のアニメーション:CSS3アニメーションでつくるインターフェイス表現|gihyo.jp … 技術評論社
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
第18回 飛び出す数字のアニメーション:CSS3アニメーションでつくるインターフェイス表現|gihyo.jp … 技術評論社
今回のお題は、メニュー項目にポインタを重ねると数字が飛び出してくるバーだ(サンプル1)。「Hop O... 今回のお題は、メニュー項目にポインタを重ねると数字が飛び出してくるバーだ(サンプル1)。「Hop Over Notification Badge」のデザインとアニメーションにもとづいて、コードはわかりやすく組み立て直した。ちょっとした動きとはいえ、アニメーションを魅力的に見せる工夫がある。あまり手が混みすぎていないところも好ましい。 サンプル1 CSS3: Hop over notification badge メニューバーのインタラクション <body>要素に加えるメニューバーは、つぎのようにul要素(class属性"menu")のリストで組み立てる。<li>要素に含めた<a>要素には、data-グローバル属性(data-bubble)で表示する数字が定めてある。<a>要素にひとつだけclass属性が与えてあるのは、あとで数字の背景色を変えるためだ。なおいつもどおり、-prefix