問題11:スタンプアニメーションを実装しよう
クリックするとスタンプアニメーションを展開しよう!
見本を動画を参考に作成してください。
見本を動画を参考に作成してください。
期待する画面
解答ソースコード
<section class="stamp-wrap">
<input type="checkbox" id="stamp">
<label for="stamp">押下して下さい</label>
<div class="stamp-box">
<div class="test">
<span>忍者</span>
</div>
</div>
</section>
¥HTML¥
input {
display: none;
}
.stamp-box {
display: inline-flex;
align-items: center;
width: 80px;
height: 80px;
border: 1px solid;
}
.test {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #E4007F;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #E4007F;
border-radius: 50%;
color: #000;
visibility: hidden;
opacity: .0;
-webkit-transform: scale(10) rotate(-30deg);
transform: scale(10) rotate(-30deg);
transition: all 0.5s ease-in 0s;
}
input:checked ~ .stamp-box > .test {
visibility: visible;
opacity: 1.0;
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
span {
position: absolute;
width: 2em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
¥CSS¥
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
クリックする前のデフォルト時に transform: scale(10) rotate(-30deg);の様にして拡大しつつ要素を斜めにして待機させておく。
opacityとvisibilityにてアニメーションを実行する事で実装が実現できる。
※ブラウザのリロード実行時にアニメーションが走ってしましますが...対策としては、何かしらのscriptを実行するか、マルチクラスの付け外しのアニメーションではないとできない模様です。