問題
5
CSSアニメーション
カラフルな図形の作り方
CSSアニメーションの問題に挑戦しよう！
問題
「カラフルな図形の作り方」
今回はカラフルな図形を作っていきましょう！
あらかじめエディタに書くコード
<div class="colorful"></div>
¥HTML¥
.colorful{
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
¥CSS¥
期待する画面
解答と解説（カラフルな図形の作り方）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まずwidthとheightを０にします。
そしてborderの色を四方向それぞれにいろを変え、太さは同じにしたら完成です。
こんな使い方はしたことはないのではないでしょうか。楽しんでいただけたなら幸いです。
