纯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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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木马webshell扫描器代码
2012/01/25 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
悬挂训练绳:TRX
2017/12/14 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
override和overload的区别
2016/03/09 面试题
外语系毕业生自荐信范文
2013/12/16 职场文书
学生喝酒检讨书
2014/02/06 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
超市创业计划书
2014/04/24 职场文书
应聘教师自荐信
2015/03/26 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
名人传读书笔记
2015/06/26 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
JavaScript实现音乐播放器
2022/08/14 Javascript