纯CSS3实现地球自转实现代码(图文教程附送源码)


Posted in HTML / CSS onDecember 26, 2012

最终成果:

纯CSS3实现地球自转实现代码(图文教程附送源码)

素材:两张图片,

espaco.jpg(1600*1000)

纯CSS3实现地球自转实现代码(图文教程附送源码)

terra.jpg(900*450)

纯CSS3实现地球自转实现代码(图文教程附送源码)

第一步,形成静态图(地球背景全屏,地球大小为450px*450px,地球位置为上下左右居中):

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Planet Earth</title>
<style type="text/css">
body{
background: url(espaco.jpg) no-repeat 0 0;
background-size: 100%; /* 背景图片被拉伸为全屏 */
}
.earth{
background: url(terra.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 450px;
left: 50%;
margin: -225px 0 0 -225px;
position: absolute;
top: 50%;
width: 450px;
}
</style>
</head>
<body>
<div class="earth"></div>
</body>
</html>

效果图:

纯CSS3实现地球自转实现代码(图文教程附送源码)

第二步,形成圆形地球效果,同时添加月晕效果

复制代码
代码如下:

/*在earth中添加以下属性样式*/

border: 1px solid rgba(26,18,101,0.3); /*形成圆边效果,视觉效果更好,不用也行*/

border-radius: 225px; /*使地球形成圆形效果*/

box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; /*形成圆形外面的模糊月晕效果*/


效果图:

纯CSS3实现地球自转实现代码(图文教程附送源码)

第三步,形成白天黑夜效果

复制代码
代码如下:

.earth:before{
content: "";
border-radius: 225px;
box-shadow: -150px -6px 25px rgba(0,0,0,0.7) inset;/*弧形阴影,形成白天黑夜效果*/
left: 0;
position:absolute;
top: 0;
height: 450px;
width: 450px;
}

效果图:

纯CSS3实现地球自转实现代码(图文教程附送源码)

最后一步,形成地球自转效果

复制代码
代码如下:

@-webkit-keyframes loop {
% { background-position: 0 0; }
%{ background-position: -900px 0;} /* 世界地图的大小为900*450,所以background-position-x: -900px */ }
/*在earth中添加如下样式*/
-webkit-animation: loop 20s linear infinite; /* 这的时间是可以设置的,如果你想地球转快一点的话,时间改小点就行了,比如10s */
 
相关文件下载地址: planetEarth.rar
HTML / CSS 相关文章推荐
CSS3中Color的一些特性介绍
May 27 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 #HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 #HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 #HTML / CSS
You might like
PHP图片上传代码
2013/11/04 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP简单日历实现方法
2016/07/20 PHP
php常用数组函数实例小结
2016/12/29 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php命令行写shell实例详解
2018/07/19 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python环境变量设置方法
2016/08/28 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python psutil监控进程实例
2019/12/17 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
创业计划书——互联网商机
2014/01/12 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
如何用PHP实现多线程编程
2021/05/26 PHP