[css3] blogs_html/css_WEB-ITnose を読んで他の人の回転惑星を読む-htmlチュートリアル-php.cn

[css3] blogs_html/css_WEB-ITnose を読んで他の人の回転惑星を読む

WBOY

リリース： 2016-06-24 11:20:05

オリジナル

1511 人が閲覧しました

一义

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>

ログイン後にコピー