問題
10
CSSAnimation
動く縞模様を作ってみよう
CSSAnimationの問題に挑戦しよう！
問題
「動く縞模様を作ってみよう」
今回はデモのような縞模様が流れているように見えるアニメーションを作りましょう！
あらかじめエディタに書くコード
<div class="stripe"></div>
¥HTML¥
.stripe{
width: 200px;
height: 50px;
border: 2px solid black;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
今回は作るのが大変だったと思います。縞模様の作り方1の応用のようなものです。
repeat-linear-gradientの使い方はlinear-gradientと似たようなのですが、違う点はrepeat-linear-gradientの場合はbackground-sizeを指定しなくても最後の色に数値を与えてあげるとその長さで切ることができます。ちなみにanimationにlinearを与えるとアニメーションが終了してから次のアニメーションが始まるまでをなめらかにつなげてくれます。
