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

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

我也蹭一下微信的热度，做一个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>

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

CSS3微信启动页天王星版的更多相关文章

  1. iOS LaunchScreen设置启动图片 启动页停留时间

    问题:想实现类似微信启动页一样 设置为一个整页面的图片 问题二:iOS启动页面怎样设置多停留一会 新建的iOS 项目启动画面默觉得LaunchScreen.xib 假设想实现一张图片作为启动页,例如以 ...

  2. 微信小程序 项目实战（一）生命周期 配置服务器信息 splash启动页

    步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...

  3. 微信小程序之启动页的重要性

    启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明白了. 小程序的首页需要展示用户关注的小 ...

  4. 张小龙在2017微信公开课PRO版讲了什么（附演讲实录和2016微信数据报告）

    今天2017微信公开课PRO版在广州亚运城综合体育馆举行,这次2017微信公开课大会以“下一站”为主题,而此次的微信公开课的看点大家可能就集中在腾讯公司高级副总裁.微信之父——张小龙的演讲上了!今天中 ...

  5. 微信5.4安卓版重回ios风格 导航菜单都放底栏位置

    微信5.4安卓版发布更新了,由于本人的手机设置软件自动更新,中午的时候才发现微信换成了5.4版本,启动微信后是一个大大的“转账,就是发消息”,进入微信界面有点小惊喜,导航菜单都改为底部tab方式,顶部 ...

  6. swift——启动页国际化：一步一步动态加载启动页图片，启动的时候加载文字

    由于公司的需求,要求做一个国际化的启动页,因为app我也弄国际化了,就剩下启动页国际化未完成,百度了呵谷歌了好多答案都不尽如人意,最后也是看见同事完成,我也问了具体的做法,决定分享给需要的人,免得和我 ...

  7. 【Android测试】【随笔】获得App的包名和启动页Activity

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5157308.html 前言 经常看到一些刚刚接触Andro ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  9. 微信5.0 Android版飞机大战破解无敌模式手记

    微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...

随机推荐

  1. 同形异义字：看我如何拿到TaoBao.com的解析权

    *本文原创作者:expsky@MS509Team,本文属FreeBuf原创奖励计划 同形异义字钓鱼攻击号称"几乎无法检测",是最狡猾的钓鱼攻击!这种攻击产生的原因是国际化域名IDN ...

  2. (转）新手写爬虫v2.5（使用代理的异步爬虫）

    开始 开篇:爬代理ip v2.0(未完待续),实现了获取代理ips,并把这些代理持久化(存在本地).同时使用的是tornado的HTTPClient的库爬取内容. 中篇:开篇主要是获取代理ip:中篇打 ...

  3. TCP协议三次握手与四次挥手通俗解析

    TCP/IP协议三次握手与四次握手流程解析 一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字 ...

  4. javascript如何用递归写一个简单的树形结构

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {&qu ...

  5. String 操作

    String nbbms ="col_1_1_1_1,col_2_2_2_@,"; @ 实现将最后一个逗号去掉:从第一个字符串到最后一个逗号之前的字符串截取[java] Strin ...

  6. python appium 操作app

    下面是一些Python脚本中操作app的用法: 检查app安装情况(返回true/false), driver.is_app_installed(package_name) 安装app driver. ...

  7. 如何修改int的打印内容——史上最难的JAVA面试题

    序 今天看到了一个比较特别的面试题,考察的是如何改变int的System.out.print的结果.题目如下: 下面的一句话"这是初级java实习生面试题"非常挑衅的激起了大家做题 ...

  8. UICollectionView中Cell左对齐 居中 右对齐 等间距------你想要的，这里都有

    支持靠左,居中,靠右,等间距对齐. 靠左等间距.png 居中等间距.png 靠右等间距.png #import <UIKit/UIKit.h> typedef NS_ENUM(NSInte ...

  9. webservice Dome--一个webservice的简单小实例

    1.理解:webservice就是为了实现不同服务器上不同应用程序的之间的通讯 2.让我们一步一步的来做一个webservice的简单应用 1)新建一个空的web应用程序,在程序上右键,新建项目,选择 ...

  10. 【★】RSA-什么是不对称加密算法？

    不对称加密算法RSA浅析 本文主要介绍不对称加密算法中最精炼的RSA算法.我们先说结论,也就是RSA算法怎么算,然后再讲为什么. 随便选取两个不同的大素数p和q,N=p*q,r=(p-1)*(q-1) ...