今天被微信启动页刷屏了。

一直还以为启动页背景显示的月球的。今天才了解到这么有含义。

 

我也蹭一下微信的热度，做一个HTML+CSS版本的。

用CSS画地球太困难了，来个简单点的，天王星版。

主要使用到css3的渐变，阴影，圆角等属性

演示地址：

http://suohb.com/work/weixin.html

点击查看效果

效果图如下：

源码：

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Pragma" content="no-cache" />
  5 <meta http-equiv="Cache-Control" content="no-cache" />
  6 <meta http-equiv="Expires" content="0" />
  7 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  9 <style type="text/css">
 10 #box2{
 11     position:relative;
 12     margin:0 auto;
 13     width:279px;
 14     height:497px;
 15     background:radial-gradient(circle,#10535b 15%,#000105 70%);
 16     overflow:hidden;
 17 }
 18 .earth {
 19     position: absolute;
 20     left: 45px;
 21     top: 158px;
 22     width: 190px;
 23     height: 190px;
 24     border-radius: 50%;
 25     background: #80f0f1;
 26     box-shadow:inset -5px 5px 75px #1dc9d5;
 27 }
 28 .moon {
 29     position: absolute;
 30     left: 50%;
 31     transform: translateX(-50%);
 32     top: 351px;
 33     width: 631px;
 34     height: 403px;
 35     border-radius: 50%;
 36     background: #000b17;
 37     box-shadow: 0 0px 5px rgba(255,255,255,.6);
 38     overflow:hidden;
 39 }
 40 .moon > div{
 41     position:absolute;
 42     left: 50%;
 43     transform: translateX(-50%);
 44     top: -60%;
 45     width: 631px;
 46     height: 403px;
 47     background:radial-gradient(circle,#10535b 1%,#000b17 40%);
 48     opacity:.4;
 49 }
 50 .man {
 51     position: absolute;
 52     left: 125px;
 53     top: 322px;
 54 }
 55 .man > div:nth-child(1){
 56     position:absolute;
 57     left:-0.5px;
 58     transform:translateX(-50%);
 59     width:4px;
 60     height:5px;
 61     border-radius:50%;
 62     background:#030305;
 63 }
 64 .man > div:nth-child(2){
 65     position:absolute;
 66     left:-1px;
 67     top:5px;
 68     transform:translateX(-50%);
 69     width:7px;
 70     height:15px;
 71     border-top-left-radius:40%;
 72     border-top-right-radius:40%;
 73     border-bottom-left-radius:30;
 74     background:#030305;
 75 }
 76 .man > div:nth-child(3){
 77     position:absolute;
 78     left:-1px;
 79     top:19px;
 80     transform:translateX(-50%);
 81     width:1px;
 82     height:11px;
 83     border-left:2px solid #030305;
 84     border-right:2px solid #030305;
 85 }
 86 .man > div:nth-child(4){
 87     position:absolute;
 88     left:0;
 89     top:30px;
 90     transform-origin:center 0%;
 91     transform:translateX(-48%) rotate(55deg);
 92     width:6px;
 93     height:30px;
 94     background:linear-gradient(rgba(3,3,3,.7),rgba(3,3,3,.1));
 95     border-radius:40%;
 96 }
 97 </style>
 98 </head>
 99 <body bgcolor="#000105">
100 <div id="box2">
101     <div class="moon"><div></div></div>
102     <div class="earth"></div>
103     <div class="man">
104         <div></div>
105         <div></div>
106         <div></div>
107         <div></div>
108     </div>
109 </div>
110 <script>
111 </script>
112 </body>
113 </html>

 

更多特效请关注我的公众号 ：