旋转的地球css3
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的更多相关文章
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- SceneKit做一个旋转的地球效果
SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- css旋转
翻转180度 /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the ...
- DOM+CSS3实现小游戏SwingCopters
前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...
- jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
- css3动画由浅入深总结
阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...
- CSS3 变形记
CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5
9 透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...
随机推荐
- ASP.NET MVC加载ASCX之后，并为之赋值
Insus.NET有写过一篇<ASP.NET MVC显示UserControl控件(扩展篇)>http://www.cnblogs.com/insus/p/3642634.html ,还没 ...
- 彻底理解voliate
1.voliate简介 在上一篇文章中我们深入理解了java关键字synchronized,我们知道在java中还有一大神器就是关键volatile,可以说是和synchronized各领风骚,其中奥 ...
- Java基础——字符编码
一.ASII 美国(国家)信息交换标准(代)码. 计算机中只有数字,一切都是用数字表示,屏幕上显示的一个一个的字符也不例外. 一个字节可表示的数字为0-255,足以显示键盘上的所有的字符 例如. a ...
- Inviting Friends（hdu3244 && zoj3187）完全背包+二分
Inviting Friends Time Limit: 1 Second Memory Limit: 32768 KB You want to hold a birthday party, invi ...
- SpringBoot+Mybatis+PageHelper实现分页
SpringBoot+Mybatis+PageHelper实现分页 mybatis自己没有分页功能,我们可以通过PageHelper工具来实现分页,非常简单方便 第一步:添加依赖 <depend ...
- ubuntu16.04下安装mysql，并开启远程访问
一.安装 apt-get install mysql-server 二.本地连接 mysql默认开启了本地连接 直接通过mysql -uuser -p,然后输入密码访问 三.开启远程访问 3.1.创建 ...
- Codeforces687C(SummerTrainingDay03-D DP)
C. The Values You Can Make time limit per test:2 seconds memory limit per test:256 megabytes input:s ...
- 关于shortcut icon和icon
语句一:<link rel="shortcut icon" href="favicon.ico" /> 语句二<link rel=" ...
- 使用PHPExcel实现数据批量导出为excel表格
首先需要下载PHPExecel类文件,帮助文档可以参考PHPExcel中文帮助手册|PHPExcel使用方法. 下面直接上例子,是我自己写的一个简单的批量导出数据为excel的例子 前台页面 比较简单 ...
- AsnycLocal与ThreadLocal
AsnycLocal与ThreadLocal AsnyncLocal与ThreadLocal都是存储线程上下文的变量,但是,在实际使用过程中两者又有区别主要的表现在: AsyncLocal变量可以在父 ...