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

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

我也蹭一下微信的热度,做一个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. 张小龙在2017微信公开课PRO版讲了什么(附演讲实录和2016微信数据报告)

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

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

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

  5. swift——启动页国际化:一步一步动态加载启动页图片,启动的时候加载文字

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

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

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

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

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

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

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

  9. 开放源代码的微微信.NET 0.8 版公布了

    微微信.NET 0.8 版公布了     A.源代码应用范围:         未认证的和经过认证的微信订阅号.微信服务号均可使用,本源代码的每个模块都提供全然的 ASP.NET C#源代码,绝对不含 ...

随机推荐

  1. $.noop()和$.map()函数

    最近在项目中发现$.noop()函数,因以前没使用过故查询下,现整理如下: jQuery.noop()函数是一个空函数,它什么也不做. 当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以 ...

  2. CSS的伪元素(二)

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. ssh登陆笔记&#128210;

    ssh的配置 ssh的配置文件在/etc/ssh下,有两种配置文件,ssh_config和sshd_config. ssh_config是针对客户端的配置文件, sshd_config是针对服务端的配 ...

  4. DataReader的例子

    前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataReader对 ...

  5. SQL优化一

    1.行列转换: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值); select decode(sign(变量1-变量2),-1,变量1,变量2) from dual ...

  6. Oracle获取异常的具体出处dbms_utility.format_error_backtrace

    DBMS_UTILITY.FORMAT_ERROR_BACKTRACE :返回当前异常相应的描述,通过它就能知道异常的最初生成处.   系统为最近一次生成的异常设置了一个栈,并跟踪它的传递过程,而这个 ...

  7. word中从正文开始编码的方法

    假如第1页和第2页是首页和目录,你想从第3页的正文开始设置页码 1. 将光标移到第二页的最后位置,点击插入“分隔符”,选择“分节类型”的“下一页”,确定.这时光标自动移到第三页. 2. 点击插入页码, ...

  8. springboot+thymeleaf简单使用

    关于springboot想必很多人都在使用,由于公司项目一直使用的是SpringMVC,所以自己抽空体验了一下springboot的简单使用. 环境搭建 springbooot的环境搭建可以说很灵活, ...

  9. nginx 1.14.0 配置部署 thinkphp 5.1

    开始接触NGINX,配置tp5配了半天,找不到具体原因,于是用网上搜索到的配置复制粘贴搞定. 感谢 https://blog.csdn.net/qq_36431213/article/details/ ...

  10. go语言中net包tcp socket的使用

    一.通过socket我们模拟请求网易 package main; import ( "net" "log" "io/ioutil" &quo ...