纯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 border-radius属性详解
Jul 05 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
Terran剧情介绍
2020/03/14 星际争霸
PHP编程与应用
2006/10/09 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Django  ORM 练习题及答案
2019/07/19 Python
python list多级排序知识点总结
2019/10/23 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python使用Pygame绘制时钟
2020/11/29 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
小学三年级作文之写景
2019/11/05 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
anaconda python3.8安装后降级
2021/06/11 Python