エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【個人開発】さんまを焼くだけのアプリのさんまの焼き具合の調整方法についてまとめてみた - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【個人開発】さんまを焼くだけのアプリのさんまの焼き具合の調整方法についてまとめてみた - Qiita
はじめに 以下のアプリについて、焼き具合の調整ってどうやってるの?と何人かに聞かれたので書くことに... はじめに 以下のアプリについて、焼き具合の調整ってどうやってるの?と何人かに聞かれたので書くことにしました。 流れ まず、画像を全て重なるように、positionで指定して重ねます。 そしてz-indexで画像の優先順位を指定します。 そうすることで、一番上に表示されてる画像をcssのanimationとkeyframeを使って、徐々にopacity: 0;にすると下の画像が浮き上がってきます。 生の状態のさんま(一番上に表示されるようにする) 焼きの状態のさんま(二番目に表示されるようにする) 焦げた状態のさんま(三番目に表示されるようにする) の3枚を重ねて、時間をずらして順次表示されるようにすることで焼き色の変化を実現しています。 コード index.html <div class="sanma"> <img id="nama" src="./images/nama.png" />