纯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动画animation实现云彩向左滚动
May 09 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 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
JAVA/JSP学习系列之七
2006/10/09 PHP
浅谈PHP语法(1)
2006/10/09 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
简单谈谈favicon
2015/06/10 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
浅谈react性能优化的方法
2018/09/05 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
请求时token过期自动刷新token操作
2020/09/11 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python 快速排序代码
2009/11/23 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python中dict使用方法详解
2019/07/17 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
家长会演讲稿
2014/04/26 职场文书
学校运动会加油词
2015/07/18 职场文书