エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
第16回 並んで弾けるアニメーション | gihyo.jp
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
第16回 並んで弾けるアニメーション | gihyo.jp
今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える(サンプル1)。... 今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える(サンプル1)。「Smooth Pulse」のデザインとアニメーションをもとに、わかりやすく組み立て直した。アニメーションの工夫があるものの、技術的にはむずかしくない。ただ、要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて、要素の数は4つに減らした。 サンプル1 CSS3: Smooth Pulse 水平に並べた要素に静的なスタイルを割り当てる アニメーションを加える前の、4つの要素の組み立てと静的なスタイルは、後に掲げるコード1のとおりだ。border-radiusプロパティの値を50%にして、要素は円形にした。そして、色は緑系(#33ffff)から青系(#3399ff)まで、段階的に変えている(図1)。アニメーションは、円形の<a>要素(class属性"circl