CSS test page

回転してる四角について少し説明

HTML

{div class="hosi"} {/div}　　　　　（<>が使えないので｛｝で代用しています）



CSS

.hosi{　　　　　　　　　　　　/*class名を指定。※classはドットを忘れない様に*/
width: 200px;　　　　　　　　　/*width、heightで画面後ろの回ってる四角の大きさを指定*/
height: 200px;
background-color:#333;　　 　　/*四角の色を指定*/
opacity:0.6;　　　　　　　　　 /*四角の透明度を指定（0〜1.0の間）*/
position: fixed;　　　　　　　　/*四角を画面に固定*/
display: inline-block;
z-index:-1;　　　　　　　　　　/*四角の表示優先順位を各要素の下に指定*/
margin:-50% 0% 0% -5%;　　　 /*四角の位置を指定*/
animation:key 5s linear infinite;　/*名前、継続時間、動きのタイミング、継続回数を指定*/
}

@keyframes key{　　　　　　　　/*名前を合わせる*/
0%{transform:rotate(0deg);}　　　　/*transform:rotate(0deg)カッコ内は角度*/
50%{transform:rotate(180deg);}　　/*途中に180°を入れないと回転しない*/
100%{transform:rotate(360deg);}　　/*指定した継続時間の間0%〜100%にかけて変化していく*/
}




コメントアウトとか説明が雑で見づらいのは目をつぶってください（汗


display: inline-block;に関してはよく理解できていないので説明しませんでしたが、上記のものはCSSのリファレンスでググればすぐに分かるので気になる方は調べてみてください。