問題
4
CSSアニメーション
キラッと光るボタンを作ろう
CSSアニメーションの問題に挑戦しよう！
問題
「キラッと光るボタンを作ろう」
以下のコードを使ってください
あらかじめエディタに書くコード
<div class="btn">ここをクリック</div>
¥HTML¥
.btn{
position: relative;
padding: 10px 0;
background-color: #dddddd;
text-align: center;
color: black;
width: 200px;
cursor: pointer;
box-shadow: 0 5px #bbbbbb;
transition: .5s;
}
.btn:active{
transform: translateY(5px);
box-shadow: 0 0 #bbbbbb;
}
.btn::before{
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
}
¥CSS¥
期待する画面
解答と解説（キラッと光るボタンを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回はwebサイトでよく見る定期的に光るボタンを作ってみました。
擬似要素beforeを使って上に色を塗るといったイメージです。
基本的に物体が動く時少しづつ動き出してから速度が早くなっていきますよね。
なのでアニメーションが終わりに近くにつれて変化が大きくなるようにすると自然に見えます。
数字は解答の通りでなくてもいいのですが、さっき言ったことは意識しておいてほしいです。
animationは@keyframesを使って定義した動きを呼び出すことができます。パーセンテージの中にその時に応じた指示を書くことで時間と共に変化するアニメーションが作れます。
animationにinfiniteを適用することによってアニメーションを指定の時間ごとに行います。
