html 地球页面代码,纯CSS3实现地球自转实现代码(图文教程附送源码)
最终成果:
素材:两张图片,
espaco.jpg(1600*1000)
terra.jpg(900*450)
第一步,形成静态图(地球背景全屏,地球大小为450px*450px,地球位置为上下左右居中):
复制代码代码如下:
Planet Earth
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;
}
效果图:
第二步,形成圆形地球效果,同时添加月晕效果:
复制代码代码如下:
/*在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; /*形成圆形外面的模糊月晕效果*/
效果图:
第三步,形成白天黑夜效果:
复制代码代码如下:
.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;
}
效果图:
最后一步,形成地球自转效果:
复制代码代码如下:
@-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 */
相关文件下载地址:
html 地球页面代码,纯CSS3实现地球自转实现代码(图文教程附送源码)相关推荐
- html5 在线直播代码,用HTML5代码实现烘托直播间疯狂点赞动画氛围(附全部源码)...
用HTML5代码实现烘托直播间疯狂点赞动画氛围(附全部源码) 直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯 ...
- 30 行代码实现蚂蚁森林自动收能量(附送源码)
点击上方 IT牧场 ,选择 置顶或者星标技术干货每日送达! blog.csdn.net/article/details/113734855 推荐:https://www.xttblog.com/?p= ...
- 30 行Python代码实现蚂蚁森林自动收能量(附送源码)
公众号 "菜鸟学Python", 设为 "星标" 带你一起学Python 编辑:业余草 blog.csdn.net/article/details/113734 ...
- html怎么实现地球自转,纯CSS3实现地球自转的教程
相信很多人在听到CSS3实现地球自转的时候都会很惊讶,不过css确实可以实现地球自转,那么你知道纯CSS3如何实现地球自转吗?好奇的小伙伴们一起跟爱站小编去看看纯CSS3实现地球自转的教程吧. 最终成 ...
- html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码.所以最近用css3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不 ...
- beautifulsoup解析动态页面div未展开_实战|Python轻松实现动态网页爬虫(附详细源码)...
用浅显易懂的语言分享爬虫.数据分析及可视化等干货,希望人人都能学到新知识.项目背景事情是这样的,前几天我公众号写了篇爬虫入门的实战文章,叫做<实战|手把手教你用Python爬虫(附详细源码)&g ...
- Flask+VUE 实现页面增删改查显示开发+测试(图文教程附源码)
目录 一.新建项目并初始化 二.安装依赖 axios.elementUI 三.Vue代码 四.进行接口联调 五.后端接口优化 六.web页面功能测试 七.总结 八.展望 九.附录(截止发文时的代码) ...
- jQuery+css3实现极具创意的罗盘旋转时钟效果源码
效果 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
- 静态HTML网页设计作品 代码质量好-上海介绍(5页) HTML+CSS+JavaScript(含源码)
HTML5期末大作业:上海介绍网站设计--代码质量好-上海介绍(5页) HTML+CSS+JavaScript(含源码) 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html& ...
最新文章
- 树形dp技巧,多叉树转二叉树
- [一文一命令]less命令详解
- XML 序列化 【译】
- ProjectManagement::Redmine备份与恢复
- python和sas哪个有用考研_金融学研究生用好计量软件的好处呢? stata sas s-plus python R哪个更有重要呢?...
- 爬虫小记:利用cookies跳过登陆验证码
- 用Linux命令行实现删除和复制指定类型的文件
- BZOJ3211: 花神游历各国
- 用doxygen自动生成文档
- WM6.5中隐藏和显示任务栏、命令栏及输入面板
- C++ 内存空间初探
- 数据结构利器之私房STL(中)
- es5 html片段拼接,es5的 reduce怎样用在拼接html字符串??? - 社区 - 妙味课堂
- 差分进化算法_Python进化算法工具箱的使用(三)用进化算法优化SVM参数
- cad快看_对于CAD看图软件,你到底了解多少?
- 卷积神经网络以LeNet网络为例的手写体识别
- linux移动文件的命令是什么,linux移动文件命令
- Hdu--5064(DP)
- 网站点击量太大崩溃怎么办_网站崩溃时该怎么办
- 基于ZFC公理系统的无穷小微积分学
热门文章
- 【Unity】虚拟相机跟随Player移动并输出jpg图片
- ios 更新尺寸调用什么方法_iOS开发:iPhone尺寸和适配
- ASEMI肖特基二极管型号大全之肖特基特性及注意事项
- day46--快速排序
- 进化算法--遗传算法
- 基于卷积神经网络的数字手势识别APP(安卓) 毕业设计 附完整代码
- System.InvalidOperationException HResult=0x80131509 Message=ExecuteNonQuery 要求已打开且可用的 Connection
- 国科大学习资料--模式识别与机器学习-2016期末考试题
- CIFAR10代码解释
- 惠普暗影精灵6-开机显示非惠普原装电池(win11)