😸
風船を上下にゆらゆらさせるアニメーションUI
ゴール
CSSで風船を作って、アニメーションで一定の間隔で上下に動かして、風船をホバーするとアニメーションが止まるUI。
サンプルコード
HTML
<div class="balloons">
<button id="balloon_1"></button>
</div>
CSS(風船自体のスタイル)
/* 風船のスタイル */
.balloons button {
position: absolute;
width: 80px;
height: 100px;
border: none;
border-radius: 50%;
box-shadow: -6px -6px 0 rgba(0, 0, 0, 0.15) inset;
cursor: pointer;
transform-origin: center bottom;
}
/* 風船の線のスタイル */
.balloons button:before {
content: "";
position: absolute;
left: 30px;
bottom: -59px;
width: 2px;
height: 60px;
background: #a0a0a0;
transform: rotate(10deg);
cursor: default;
}
/* 各風船のスタイル */
#balloon_1 {
top: 0;
left: 0;
background-color: #ed7050;
animation: sway 4s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
CSS(風船のアニメーション)
/* 風船のゆらゆらアニメーション */
@keyframes sway {
/* 最初と最後の位置 */
0%,
100% {
transform: translateY(0px);
}
/* 途中の位置 */
50% {
transform: translateY(50px);
}
}
/* バルーンがホバーされたらアニメーションを止める */
#balloon_1:hover {
animation-play-state: paused;
}
Discussion