CSS3太阳系星球效果图

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3太阳系旋转</title>
<style>
* {
 margin: 0;
 padding: 0;
}
body {
 font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
 background: #080e24 repeat;
 color: #626668;
}

section {
    display: block;
    position: relative;
}

ul.solarsystem{position:relative;height:640px;list-style:none;overflow:hidden;
        -webkit-transition:all 0.09s ease-in;
}
ul.solarsystem li{text-indent:-9999px;display:block;position:absolute;border:2px solid #394057;}
ul.solarsystem li span{display:block;position:absolute;width:10px;height:10px;
    border-radius:5px;
}
ul.solarsystem li:hover{border-color:#aa4200;}
ul.solarsystem li:hover{-webkit-transform:scale(1.3);}
ul.solarsystem li.sun{width:40px;height:40px;background: #fc3;border:none;z-index:100;
    border-radius:20px;
    background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.22, rgb(204,153,0)),color-stop(1, rgb(255,219,112)));
    -webkit-transform:translate(462px,302px);
    box-shadow: 0 0 50px #c90;
    -webkit-transition:all 0.2s ease-in;
}
ul.solarsystem li.sun span{width:60px;height:60px;border-radius:30px;}
ul.solarsystem li.mercury{width:100px;height:100px;top:270px;left:430px;z-index:99;
    border-radius:52px;
    -webkit-transform:translate(462px,302px);
}
ul.solarsystem li.mercury span{background:#b6bac5;top:10px;left:10px;}
ul.solarsystem li.venus{width:160px;height:160px;top:240px;left:400px;z-index:98;
    border-radius:82px;
}
ul.solarsystem li.venus span{background:#bf8639;top:118px;left:5px;}
ul.solarsystem li.earth{width:220px;height:220px;top:210px;left:370px;z-index:97;
    border-radius: 112px;
}
ul.solarsystem li.earth span{background:#06c;top:56px;left:5px;}
ul.solarsystem li.earth span.moon{width: 4px;height: 4px;background:#ccc;top:12px;left:12px;
    border-radius: 2px;
}
ul.solarsystem li.mars{width:280px;height:280px;top:180px;left:340px;z-index:96;
    border-radius: 142px;
}
ul.solarsystem li.mars span{background:#aa4200;top:0px;left:175px;}
ul.solarsystem li.asteroids_meteorids{top:155px;left:315px;z-index:1;width: 330px;height: 330px;
    border-radius: 165px;
    border:none;
}
ul.solarsystem li.jupiter{width:340px;height:340px;top:150px;left:310px;z-index:95;
    border-radius:172px;
}
ul.solarsystem li.jupiter span{background:#e0ae6f;top:67px;left:24px;}
ul.solarsystem li.saturn {width:400px;height:400px;top:120px;left:280px;z-index:94;
    border-radius:202px;
}
ul.solarsystem li.saturn span {background:#dfd3a9;top:24px;left:300px;}
ul.solarsystem li.saturn span.ring {width:12px;height:12px;background:none;border:2px solid #5a4e34;left:-3px;top:-3px;
    border-radius: 8px;
    -webkit-transform:skewY(50deg);
}
ul.solarsystem li.uranus{width:460px;height:460px;top:90px;left:250px;z-index:93;
    border-radius: 232px;
}
ul.solarsystem li.uranus span{background:#82b3d1;top:7px;left:300px;}
ul.solarsystem li.neptune{width:520px;height:520px;top:60px;left:220px;z-index:92;
    border-radius:262px;
}
ul.solarsystem li.neptune span{background: #77c2ec;top: 0px;left: 200px;}
ul.solarsystem li.pluto {width:580px;height:580px;top:30px;left:190px;z-index:91;
    border-radius:292px;
}
ul.solarsystem li.pluto span{background:#7c6a5c;top:79px;left:79px;}
/* CSS3 Animations */
ul.solarsystem li.mercury {-webkit-animation : orbit 5s infinite linear;}
ul.solarsystem li.venus {-webkit-animation : orbit 8s infinite linear;}
ul.solarsystem li.earth {-webkit-animation : orbit 12s infinite linear;}
ul.solarsystem li.earth span {-webkit-animation:moon 2s infinite linear;}
ul.solarsystem li.mars {-webkit-animation : orbit 20s infinite linear;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation : orbit 50s infinite linear;}
ul.solarsystem li.jupiter {-webkit-animation : orbit 30s infinite linear;}
ul.solarsystem li.saturn {-webkit-animation : orbit 60s infinite linear;}
ul.solarsystem li.uranus {-webkit-animation : orbit 70s infinite linear;}
ul.solarsystem li.neptune {-webkit-animation : orbit 100s infinite linear;}
ul.solarsystem li.pluto {-webkit-animation : orbit 120s infinite linear;}
@-webkit-keyframes orbit { from {-webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes moon { from {-webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }

</style>
</head>
<body>
<section>
 <ul class="solarsystem">
 <li class="sun">太阳</li>
 <li class="mercury">水星</li>
 <li class="venus">金星</li>
 <li class="earth">地球 & 月球</li>
 <li class="mars">火星</li>
 <li class="asteroids_meteorids">小行星 & Meteorids</li>
 <li class="jupiter">木星</li>
 <li class="saturn">土星 & Ring</li>
 <li class="uranus">天王星</li>
 <li class="neptune">海王星</li>
 <li class="pluto">冥王星</li>
 </ul>
</section>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3太阳系星球效果图

分类

CSS3

描述

运用CSS3技术实现的太阳系效果图功能，将几大星球显示出来，模拟出很不错的动态效果图，特别是在鼠标划到星球所在圆环的时候，圆环高亮显示，貌似很给力的效果。请使用火狐或Chrome或Opera等浏览器查看效果。