HTML 5+CSS 3地球の太陽回りの公転を実現
7642 ワード
正面視角を使用しており、主にHTML 5+CSS 3で実現されているが、JSはただ絵を描くためのものである.
test.html:
行にはエレメントが内蔵されており、幅と内側の余白を設定できます.
test.css:
そのうち1 s=1日です.
.boxは大きなperspective属性を加えて、自分が宇宙の遠くに漂っている点を想像して地球と太陽を観察します.perspectiveプロパティを追加しないのは、無限の遠くに立って観察することに相当します.
test.js:
効果図:
転載先:https://www.cnblogs.com/lalong/p/9692579.html
test.html:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> - title>
<link type="text/css" rel='stylesheet' href="test.css">link>
head>
<body>
<div class="box">
<canvas id="sun" width="150px" height="150px">canvas>
<canvas id="earth" width="50px" height="50px">canvas>
div>
<script src="test.js">script>
body>
html>行にはエレメントが内蔵されており、幅と内側の余白を設定できます.
test.css:
*{
margin: 0;
padding: 0;
}
.box{
width: 150px;
height: 150px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
/*perspective: 10000px;*/
animation: sun linear 365s infinite; /* */
}
#sun{
position: absolute;
animation: sun linear 26.7s infinite; /* + */
}
#earth{
margin: 50px;
position: absolute;
transform: translateZ(600px);
animation: earth linear 1s infinite; /* */
}
@keyframes sun{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@keyframes earth{
from{transform: translateZ(600px) rotateY(0deg);}
to{transform: translateZ(600px) rotateY(360deg);}
}そのうち1 s=1日です.
.boxは大きなperspective属性を加えて、自分が宇宙の遠くに漂っている点を想像して地球と太陽を観察します.perspectiveプロパティを追加しないのは、無限の遠くに立って観察することに相当します.
test.js:
var sun = document.getElementById("sun").getContext('2d'),
earth = document.getElementById('earth').getContext('2d'),
gra1 = sun.createRadialGradient(75,75,0,75,75,75),
gra2 = earth.createRadialGradient(25,25,0,25,25,25);
gra1.addColorStop(0,'#ffff00');
gra1.addColorStop(1,'#ff9900');
sun.arc(75,75,75,0,2 * Math.PI);
sun.fillStyle = gra1;
sun.fill();
gra2.addColorStop(0,'#78b1e8');
gra2.addColorStop(1,'#1c4364');
earth.arc(25,25,25,0,2 * Math.PI);
earth.fillStyle = gra2;
earth.fill();効果図:
転載先:https://www.cnblogs.com/lalong/p/9692579.html