ログイン

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

CSSAnimationの問題

CSSAnimation

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

問題

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

自分の環境に書くコード

              <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を適用すれば外側だけ影が見えないようにできます。
完了にする!
LINEの友達追加でお役立ち動画をGET!!