今天被微信启动页刷屏了。
一直还以为启动页背景显示的月球的
。今天才了解到这么有含义。
我也蹭一下微信的热度，做一个HTML+CSS版本的。
用CSS画地球太困难了
，来个简单点的，天王星版。
主要使用到css3的渐变，阴影，圆角等属性
演示地址：
http://suohb.com/work/weixin.html
效果图如下：
源码：
<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
#box2{
position:relative;
margin:0 auto;
width:279px;
height:497px;
background:radial-gradient(circle,#10535b 15%,#000105 70%);
overflow:hidden;
}
.earth {
position: absolute;
left: 45px;
top: 158px;
width: 190px;
height: 190px;
border-radius: 50%;
background: #80f0f1;
box-shadow:inset -5px 5px 75px #1dc9d5;
}
.moon {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 351px;
width: 631px;
height: 403px;
border-radius: 50%;
background: #000b17;
box-shadow: 0 0px 5px rgba(255,255,255,.6);
overflow:hidden;
}
.moon > div{
position:absolute;
left: 50%;
transform: translateX(-50%);
top: -60%;
width: 631px;
height: 403px;
background:radial-gradient(circle,#10535b 1%,#000b17 40%);
opacity:.4;
}
.man {
position: absolute;
left: 125px;
top: 322px;
}
.man > div:nth-child(1){
position:absolute;
left:-0.5px;
transform:translateX(-50%);
width:4px;
height:5px;
border-radius:50%;
background:#030305;
}
.man > div:nth-child(2){
position:absolute;
left:-1px;
top:5px;
transform:translateX(-50%);
width:7px;
height:15px;
border-top-left-radius:40%;
border-top-right-radius:40%;
border-bottom-left-radius:30;
background:#030305;
}
.man > div:nth-child(3){
position:absolute;
left:-1px;
top:19px;
transform:translateX(-50%);
width:1px;
height:11px;
border-left:2px solid #030305;
border-right:2px solid #030305;
}
.man > div:nth-child(4){
position:absolute;
left:0;
top:30px;
transform-origin:center 0%;
transform:translateX(-48%) rotate(55deg);
width:6px;
height:30px;
background:linear-gradient(rgba(3,3,3,.7),rgba(3,3,3,.1));
border-radius:40%;
}
</style>
</head>
<body bgcolor="#000105">
<div id="box2">
<div class="moon"><div></div></div>
<div class="earth"></div>
<div class="man">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
</script>
</body>
</html>
更多特效请关注我的公众号 ：
