css3果然博大精深：

1.代码里面还有用box-shadow制作椭圆形阴影的效果，厉害了！之前找了好久都没找到，今天给找到了

html:

<section class="stage">

    <figure class="ball">

    	<span class="shadow"></span>

    </figure>

  </section>

css:

.ball .shadow {

    position: absolute;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);

    -webkit-transform: rotateX(90deg) translateZ(-150px);

    -moz-transform: rotateX(90deg) translateZ(-150px);

    -ms-transform: rotateX(90deg) translateZ(-150px);

    -o-transform: rotateX(90deg) translateZ(-150px);

    transform: rotateX(90deg) translateZ(-150px);

    z-index: -1;

}

效果：　　

2.下面才是重点:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>旋转的地球</title>

<style>

	* {margin:0; padding:0; border:0;}

	.ball {

	  display: inline-block;

	  width: 100%;

	  height: 100%;

	  margin: 0;

	  border-radius: 50%;

	  position: relative;

	  -webkit-transform-style: preserve-3d;

	  background: url('http://hop.ie/balls/images/world-map-one-color.png') repeat-x;

	  background-size: auto 100%;

	  -webkit-animation: move-map 30s infinite linear;

	  -moz-animation: move-map 30s infinite linear;

	  -o-animation: move-map 30s infinite linear;

	  -ms-animation: move-map 30s infinite linear;

	  animation: move-map 30s infinite linear;

	}

	.ball:before {

	  content: "";

	  position: absolute;

	  top: 0%;

	  left: 0%;

	  width: 100%;

	  height: 100%;

	  border-radius: 50%;

	  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;

	  z-index: 2;

	}

	.ball:after {

	  content: "";

	  position: absolute;

	  border-radius: 50%;

	  width: 100%;

	  height: 100%;

	  top: 0;

	  left: 0;

	  -webkit-filter: blur(0);

	  opacity: 0.3;

	  background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);

	}

	.ball .shadow {

	  position: absolute;

	  width: 100%;

	  height: 100%;

	  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);

	  -webkit-transform: rotateX(90deg) translateZ(-150px);

	  -moz-transform: rotateX(90deg) translateZ(-150px);

	  -ms-transform: rotateX(90deg) translateZ(-150px);

	  -o-transform: rotateX(90deg) translateZ(-150px);

	  transform: rotateX(90deg) translateZ(-150px);

	  z-index: -1;

	}

	body {

	  width: 300px;

	  margin: 20px auto;

	  background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);

	  background-repeat: no-repeat;

	}

	.stage {

	  width: 300px;

	  height: 300px;

	  display: inline-block;

	  margin: 20px;

	  -webkit-perspective: 1200px;

	  -moz-perspective: 1200px;

	  -ms-perspective: 1200px;

	  -o-perspective: 1200px;

	  perspective: 1200px;

	  -webkit-perspective-origin: 50% 50%;

	  -moz-perspective-origin: 50% 50%;

	  -ms-perspective-origin: 50% 50%;

	  -o-perspective-origin: 50% 50%;

	  perspective-origin: 50% 50%;

	}

	@-moz-keyframes move-map {

	  0% {

	    background-position: -849px 0; }

	  100% {

	    background-position: 0 0; } }

	@-webkit-keyframes move-map {

	  0% {

	    background-position: 0 0; }

	  100% {

	    background-position: -849px 0; }

	}

	@-o-keyframes move-map {

	  0% {

	    background-position: -849px 0; }

	  100% {

	    background-position: 0 0; } }

	@-ms-keyframes move-map {

	  0% {

	    background-position: -849px 0; }

	  100% {

	    background-position: 0 0; } }

	@keyframes move-map {

	  0% {

	    background-position: -849px 0; }

	  100% {

	    background-position: 0 0; } }

</style>

</head>

<body>

	<section class="stage">

    <figure class="ball">

    	<span class="shadow"></span>

    </figure>

  </section>

</body>

</html>

可以复制上面的代码到框框中运行试试哦！　

2

还有更好玩的css3：http://www.w3cplus.com/css3/spheres.html

有时间一定要自己写写！^_^

旋转的地球css3的更多相关文章

  1. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  2. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  3. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  4. css旋转

    翻转180度 /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the ...

  5. DOM+CSS3实现小游戏SwingCopters

    前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...

  6. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  7. css3动画由浅入深总结

    阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...

  8. CSS3 变形记

    CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5

    9  透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...

随机推荐

  1. 用python写web一定要去破解的异步请求问题.经历web.py和tornado，完破！

    1.问题 上个学期,给学校写了一个数据服务,主要从oracle里面读取一些数据供查询使用,非常快速的用web.py搭建了起来.调试顺利,测试正常,上线!接下来就是挨骂了,我铁定知道会卡,但是没想到会那 ...

  2. [基础篇] 玄机网C#培训课程-初级.

    课程目录 0x01第一课课前准备vs的选择与安装常用工具/网址      http://msdn.itellyou.cn/vs常用设置 0x02第二课C#的语法样式  编程风格VS的常用功能 俩个注意 ...

  3. 选择ORACLE数据库字符集

    如何选择数据库的字符集是一个有争议的话题,字符集本身涉及的范围很广,它与应用程序.客户的本地环境.操作系统.服务器等关系很密切,因此要做出合适的 选择,需要明白这些因素之间的关系.另外对字符集的基本概 ...

  4. git撤销提交(commit)

    我们知道Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited) 一.简介 Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照 ...

  5. Java - TreeMap源码解析 + 红黑树

    Java提高篇(二七)-----TreeMap TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap ...

  6. Apache poi 使用经验分享

    我在使用apache poi导入导出Excel做项目过程中,遇到了许许多多的问题,在此简单罗列. 1.xls和xlsx的区分:poi将2003以前和2007以后的excel封装成了两个不同的实现:HS ...

  7. JPA、ORM

    JPA:全称:Java Persistence API 解释:Java持久层API (接口规范) ORM映射元数据 JPA支持XML和JDK5.0注解两种元数据的形式,元数据描述对象和表之间的映射关系 ...

  8. js-权威指南-Web套接字

    HTTP是一种无状态的协议,,由客户端请求和服务端响应组成.HTTP实际上是比较特殊的网络协议. 大多数基于因特网的网络连接通常包含长连接和基于TCP套接字的双向消息交换.让不信任的客户端脚本访问底层 ...

  9. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  10. kvm 创建新虚拟机命virt-install 使用说明

    virt-install 命令说明 1.命令作用      建立(provision)新虚拟机   2.语法   virt-install [选项]... 3.说明(DESCRIPTION)   vi ...