CSSAnimation
Googleでログイン問題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¥
完了にする！
活動記録をTweetする
斜めに色をつける方法はlinear-gradientでできます。大きさを変える方法も簡単でwidthとheightで実現可能です。あとより一層めくれたように見せるには、めくれた部分に影をつければ、それっぽく見えます。方法としては、box-shadowを使って、親要素にoverflow:hiddenを適用すれば外側だけ影が見えないようにできます。