纯css模拟太阳系行星运行轨迹动画效果
代码语言:html
所属分类:动画
代码描述:纯css模拟太阳系行星运行轨迹动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
background: #111;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Container */
.b-system {
display: block;
width: 100vh;
height: 100vh;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
margin: 0;
padding: 0;
list-style: none;
background: radial-gradient(#6f4500 0%, #320 30%, #111 60%);
/* Describing common properties */
}
.b-system__object {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* Info box */
/* Draw disc */
/* Draw orbit */
/* Draw Sun and planets */
}
.b-system__object__about {
display: none;
position: absolute;
background: #FFF;
width: 33vh;
padding: 1vh;
color: #333;
font: normal 1.2vh/1.6vh sans-serif;
text-align: justify;
left: 50%;
}
.b-system__object:hover > .b-system__object__about {
display: block;
}
.b-system__object::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 1vh;
height: 1vh;
border-radius: 5vh;
background: #F00;
cursor: pointer;
transform: translate(-50%, -50%);
}
.b-system__object::before {
content: "";
display: block;
border-radius: 100vh;
width: 5vh;
height: 5vh;
border: 0.3vh solid rgba(0, 0, 0, 0.25);
}
.b-system__object_sun {
z-index: 9;
}
.b-system__object_sun::after {
width: 3vh;
height: 3vh;
background: #ffb100;
}
.b-system__object_sun::before {
display: none;
}
.b-system__object_mercury {
z-index: 8;
}
.b-system__object_mercury::after {
background: #a60;
margin: -0.5vh 0 0 -0.5vh;
animation: orb-mercury 1s linear infinite;
-webkit-animation: orb-mercury 1s linear infinite;
}
.b-system__object_venus {
z-index: 7;
}
.b-system__object_venus::after {
background: #9ac;
width: 1.5vh;
height: 1.5vh;
margin: -0.75vh 0 0 -0.75vh;
animation: orb-venus 2.6s linear infinite;
-webkit-animation: orb-venus 2.6s linear infinite;
}
.b-system__object_venus::before {
width: 8vh;
height: 8vh;
}
.b-system__object_earth {
z-index: 6;
}
.b-system__object_earth::after {
background: #07a;
width: 1.8vh;
height: 1.8vh;
margin: -0.9vh 0 0 -0.9vh;
animation: orb-earth 4.1s linear infinite;
-webkit-animation: orb-eart.........完整代码请登录后点击上方下载按钮下载查看
网友评论0