マイクロデモ
Photoshopで行う方法（マイクロレッスン）：
- 目的のテクスチャを選択します
- それから円を切り取ります
- レイヤーのプロパティを介して「好みに合わせて」調光またはライトニングを追加します（ライトニングを使用し、異なるシャドウの組み合わせでより現実的な結果が得られます）
長い間実装に煩わされないようにするために（これはすでに小さな問題であるため）、js + css + htmlを使用します。 上記のWebページのPhotoshopに関する「チュートリアル」は次のようになります。
- 垂直方向（水平方向または両方向）に繰り返される無限のテクスチャを選択します
- このテクスチャを背景として設定します
- 固定間隔でjsを使用して背景の位置を変更します
また、canvasを使用してこの問題を解決することもできます（たとえば、 pixi.jsまたは同様のライブラリ、または純粋なjs + canvasを使用して、クロスプラットフォームのクイックソリューションを取得できます）。
解決策
スタイルはどのように見えますか：
.planet2d { background: repeat-x 0 0 url(earthmap-h100.jpg); border: 1px solid #999; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: inset 0 0 10px rgba(255,255,255,0.9); height: 100px; width: 100px; } .planet2d.moon { background-image: url(moon-h100.jpg); } .planet2d.jupiter { background-image: url(jupiter-h100.jpg); } .planet2d.venus { background-image: url(venus-h100.jpg); } .planet2d.mercury { background-image: url(mercury-h100.jpg); } .planet2d.io { background-image: url(io-h100.jpg); }
つまり 背景の初期状態を設定し、ブロックを丸める必要があります（ここでは境界線半径を使用しますが、円を内側に切り取ったテンプレート画像を使用できます。また、このテンプレートに影を含めて、より急な結果を得ることができます） 、ブロックサイズを設定します-それだけです。 次に、さまざまな惑星のスタイルについて説明します。
これ以上JavaScriptコードはありません：
(function (w) { w.Planet2D = function (interval) { interval = interval || 40; var j = 0; setInterval(function () { var els = document.querySelectorAll(".planet2d"); j--; for (var i = 0; i < els.length; i++) { els[i].style.backgroundPosition = j + "px 0px"; } }, interval); } })(window);
つまり すべての要素を選択して、背景画像をシフトする必要があります。
まとめ
- 数学なし
- このトリックは多くのプラットフォームで簡単に実装できます
- アニメーションは3Dのように非常に信じられます
参照資料
デモ
さまざまな惑星の風景
解剖のためのGithub
UPD： omfg ：純粋なCSSでcodepen.io/chinchang/pen/xCkusを作成することもできます