纯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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
js实现图片轮播效果
2015/12/19 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
公司建议书怎么写
2014/05/15 职场文书
青年标兵事迹材料
2014/08/16 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript