問題

10
CSSAnimation

動く縞模様を作ってみよう

CSSAnimationの問題に挑戦しよう!

問題

動く縞模様を作ってみよう

今回はデモのような縞模様が流れているように見えるアニメーションを作りましょう!

あらかじめエディタに書くコード

                    <div class="stripe"></div>
¥HTML¥
                
                    .stripe{
  width: 200px;
  height: 50px;
  border: 2px solid black;
}
¥CSS¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

今回は作るのが大変だったと思います。縞模様の作り方1の応用のようなものです。
repeat-linear-gradientの使い方はlinear-gradientと似たようなのですが、違う点はrepeat-linear-gradientの場合はbackground-sizeを指定しなくても最後の色に数値を与えてあげるとその長さで切ることができます。ちなみにanimationにlinearを与えるとアニメーションが終了してから次のアニメーションが始まるまでをなめらかにつなげてくれます。

さらにスキルアップしたい方は公式LINEから「CSSAnimation」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET