CSSAnimation
Googleでログイン問題5：カラフルな図形の作り方
今回はカラフルな図形を作っていきましょう！
あらかじめエディタに書くコード
<div class="colorful"></div>
¥HTML¥
.colorful{
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
¥CSS¥
期待する画面
解答ソースコード
.colorful{
width: 0;
height: 0;
border-top: 30px solid red;
border-bottom:30px solid blue;
border-left: 30px solid green;
border-right: 30px solid yellow;
border-radius: 50%;
}
¥CSS¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
そしてborderの色を四方向それぞれにいろを変え、太さは同じにしたら完成です。
こんな使い方はしたことはないのではないでしょうか。楽しんでいただけたなら幸いです。