ログイン
問題1

端がめくれるアニメーションの作り方

アイコン画像

問題1:端がめくれるアニメーションの作り方

今回はシールのようにめくれるアニメーションを作ってみたいと思います。
まずはデモの四角形にマウスをフォーカスしてみてください

エディターのアイコンあらかじめエディタに書くコード

                <div class="seal"></div>
¥HTML¥
              
                .seal{
  width: 100px;
  height: 100px;
  background-color: #dddddd;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .seal{
  position: relative;
  overflow: hidden;
}
.seal::before{
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  background:linear-gradient(135deg,#fff 50%,#dfd 50%);
  top: 0;
  left: 0;
  transition: 2s;
  box-shadow: 0 0 20px #333333;
}
.seal:hover::before{
  width: 30px;
  height: 30px;
}
¥CSS¥
            

コメントのアイコン解説

まず考え方ですが、擬似要素を用いて斜め半分だけ色のついたブロックの大きさを大きくしていって、外側の斜め半分の色を背景色と同じにすることでめくれたようにみえるアニメーションができます。
斜めに色をつける方法はlinear-gradientでできます。大きさを変える方法も簡単でwidthとheightで実現可能です。あとより一層めくれたように見せるには、めくれた部分に影をつければ、それっぽく見えます。方法としては、box-shadowを使って、親要素にoverflow:hiddenを適用すれば外側だけ影が見えないようにできます。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる