遊びだけで、実用性はなさそうですが、遊びだけでは騙されませんし、遊びだけでは騙されません。 。 。 。 。 。 。 。
地球と月の回転の CSS 効果。退屈な場合は、メモ帳にコピーして試してみてください
1px;<br> height: 300px;<br> width: 300px;<br> margin:100px auto; } <p>.sunline<br> <br> {<br> position:相対;<br> 幅: 400px;<br> ボーダー: 2px ソリッドブラック;<br> ボーダー -半径: 50%;<br> マージン: 50px 0 0 50px;<br> 表示: flex;</p> アニメーション: 10 秒の線形無限回転;<p> }<br>; <br> マージン: 自動; <br> 背景色: 赤; <br> 境界線: 50%; <br> <br> <br> 位置: 絶対; <br> 右: 0; <br> 幅: 200%;マージン: -100px -100px 0 0;<br> ボーダー: 1px ソリッドブラック </p> ボーダー半径: 50%; <p> アニメーション: 2 秒無限リニア ; <br> 高さ: 50px;<br>幅: 50px;<br>背景色:緑;<br>境界半径:50%;<br>}</p>.moon<p><br>{</p>位置:絶対;<p>左:0;<br>上:50%;<br>高さ:20px ;<br>幅: 20px;<br>マージン: -10px 0 0 -10px;<br>背景色: グレー;<br>ボーダー半径: 50%;<br> }<br>@keyframes 回転<br> {<br> 100%{変換: 回転(360度) ; <br> <br> }</p>}<p></style><br></head><br> <body><br> <!-- コード部分開始 --><br> <div class="box"> ;<br /> < div class="sunline"><br> <div class="sun"></div><br> <div class="earthline"></p> <div class="earth"> ;<p> <div class="moon"></div><br> </div><br> </div><br> ><br> <br> <br> <br></p>
