ホームページ > 記事 > ウェブフロントエンド > [css3] blogs_html/css_WEB-ITnose を読んで他の人の回転惑星を読む
[css3] blogs_html/css_WEB-ITnose を読んで他の人の回転惑星を読む
- WBOYオリジナル
- 2016-06-24 11:20:051463ブラウズ
一义
DIV 太陽軌道サンラインを定義すると、境界線が表示され、関連する POSITION を定義します。Er-Radius: 50%;
margin:50px auto;
Position:relative;
anime:sunRotate 5s;
}
div sun sun を定義し、赤い太陽を中央に置き、中央に表示し、位置を絶対として定義します。
左から 50%、上から 50%、左マージンは半分です幅、上の余白は高さの半分です
#sun{
背景: 赤;
幅: 150px;
高さ: 150px ;
位置: 絶対;
左: 50%;
上:50 %;
margin-left:-75px;
margin-top: -75px;
border-radius: 50%;
}
地球の軌道地球線を定義し、境界線が表示され、位置を次のように定義します絶対、左から 50%、高さの負の半分、幅の半分の負の左マージン
#earthline{
width : 200px;
height: 200px;
border:1px Solid #000;
border-radius: 50%;
Position: 絶対;
left: 50%;
top: -100px;
margin -left: -100px;
}
div Earth を定義します。太陽軌道内で地球を水平方向に中心に、地球を垂直方向に中心に配置します。位置を絶対値として定義します。左から 50%、上から 50%、左マージンは負です。負の上部マージンの幅の半分、高さの半分です
#earth{
背景: 緑;
幅: 100px;
高さ: 100px;
境界半径: 50%;
位置: 絶対;
左: 50%;
マージン左: -50px;
top: 50%;
margin-top: -50px;
}
月を定義、位置を絶対として定義、距離左 50%、負の高さは半分、左マージンは幅の半分
#moon{
幅: 40px;
高さ: 40px;
背景: 青;
境界半径: 50%;
位置: 絶対;
左: 50%;
マージン左: -20px;
トップ: -20px;
}
アニメーション @keyframes を定義、100% 進行したら回転圈
@keyframes sunRotate{
100%{
transform:rotate(3) 60度);
}
}
は太阳轨道sunline绑定アニメーション画、使用属性アニメーション、パラメータ：规则名、実行時間、速度曲線、遅延時間、再生回数、反転するかどうか
アニメーション: sunRotate 10s Linear 0s無限;
速度曲線: リニア (線形均一速度) イーズ (緩和)
再生回数: 無限 (無限)
地球軌道アースラインのバインド アニメーション
アニメーション: sunRotate 5s 線形 0s 無限;実行時間が違います、こちらの方が早いです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>#sunline{ width: 500px; height: 500px; border:2px solid #000; border-radius: 50%; margin:100px auto; position: relative; animation:sunRotate 10s linear 0s infinite;}#sun{ background: red; width: 150px; height: 150px; position: absolute; left: 50%; top:50%; margin-left:-75px; margin-top: -75px; border-radius: 50%;}#earthline{ width: 200px; height: 200px; border:1px solid #000; border-radius: 50%; position: absolute; left: 50%; top: -100px; margin-left: -100px; animation:sunRotate 5s linear 0s infinite;}#earth{ background: green; width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px;}#moon{ width: 40px; height: 40px; background: blue; border-radius: 50%; position: absolute; left: 50%; margin-left: -20px; top: -20px;}@keyframes sunRotate{ 100%{ transform:rotate(360deg); }}</style></head><body><div id="sunline"> <div id="sun"></div> <div id="earthline"> <div id="earth"></div> <div id="moon"></div> </div></div></body></html>