2025-1-5
わぁ。。素敵なアニメーショ…
波紋
実装サンプル
動かす円はこちら。
cssでborderの色を白の半透明にしてbox-shadowで水色のぼかしを表現しているのがポイント
1つだけ
2つ
実装手順など解説
css:transformでscaleを操作している。0→0.8→1.5。
途中で止まるような動きが気になったのでイージングは「linear」（一定速度）でやってみた。
2つverは0.3sおくらせて同じ要素をアニメさせる。
動作環境
- ○:動作する
- △:動作するが意図せぬ挙動
- ☓:動作しない
| - | Mac | Windows11 | SP | ||||||
|---|---|---|---|---|---|---|---|---|---|
| ブラウザ | Chrome | Firefox | Safari | Chrome | Firefox | Edge | IE | Safari on iOS | Chrome for Android |
| 対応 | ○ | ○ | ○ | ○ | ○ | ||||
メッセージ
↑
-
20 -
2022-9-15おっ、トレーナー！今日もお…
19 -
2022-9-4トレーナーさん、今日もはり…
14 -
2022-8-29最近、トレーナーが全然更新…
30 -
2022-5-5あ、トレーナーさん！こんに…
22 -
2022-4-10昨日はずいぶん暖かい日和だ…
25 -
2022-4-3
今日は久しぶりにアニメが増…
21 -
2022-3-21
やぁ、はじめましてかな。ト…
28 -
2022-3-10
あれ…今週は特にアニメが増…
27 -
2022-3-2今日の更新はホバーアニメや…
13 -
2022-2-24今週は水曜祝日だったから1…
10 -
2022-2-20
こんにちは！
20 -
2022-2-15
先週は世話になったな、オグ…
21 -
2022-2-11
聞いてくれ、タマ。
10 -
2022-2-3
やぁタマ。今回は何が更新さ…
13
トレセン学園