纯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实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 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中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue生命周期的探索
2019/04/03 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python中字典的setdefault()方法教程
2017/02/07 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python使用turtle库绘制时钟
2020/03/25 Python
Django如何自定义分页
2018/09/25 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python IDLE添加行号显示教程
2020/04/25 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python连接mysql有哪些方法
2020/06/24 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
人力资源管理专业应届生求职信
2013/09/28 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
公司端午节活动方案
2014/02/04 职场文书
初中班级口号
2014/06/09 职场文书
cf战队收人口号
2014/06/21 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
小班下学期个人总结
2015/02/12 职场文书
银行求职信怎么写
2019/06/20 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers