设计思路与核心技术

旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态效果。本例所需核心技术主要描述如下：

1、flex布局

通过使用flex布局模式用于实现呈现动画效果div在页面居中显示效果，核心代码如下：

display: flex; //flex布局justify-content: center;//水平居中 align-items: center;//垂直居中

2、before与after伪元素

在之前案例设计分析中，我们使用before与after等元素进行了案例设计，这两个元素主要用于在页面中生成虚拟的元素。本例中我们使用before在地球容器层前定义了用于存储云彩的伪元素层。部分代码如下：

.earth:before{ content: ''; width: 100%; //宽度height: 100%; //高度position: absolute; //绝对定位background: url('cloud.png');//背景图片 background-size: cover; //图片放缩类型opacity: 0.8; //透明度border-radius: 50%; //圆角animation:animate 18s linear infinite;//动画 }

3、animation与keyframes

animation属性与keyframes是实现CSS动画的关键，本例中需要将地球图片与云彩图片分别进行动画定义，最终呈现动画效果，其中云彩动画定义如下：

animation:animate 18s linear infinite;//动画定义 @keyframes animate{ //关键帧定义0%{ background-position: 0 0; } 100%{ background-position:807px 0; } }

效果实现与核心代码

在明确本例设计思路与掌握所需技能基础上，我们可以搜集素材完成本案例效果的制作与实现。

1、所需素材

主要所需素材包括地图平面图片，飞机图标，云彩图片等。素材如下图所示：

图片素材

2、页面布局

本例页面布局较为简单，只需要一个div用于存储地图图片资源，before元素用于存储云朵，飞机素材可用img标记元素存储。页面body部分布局代码如下：

3、CSS样式编辑

CSS样式编辑是本例核心，包括页面布局的实现，伪元素的定义及动画效果设计实现等，其中earth类、earth:before类与动画设计时关键部分，核心代码如下：

核心CSS定义

以上给出旋转地球设计效果实现思路及核心相关技术，如需代码分享，请评论区留言、关注并私信。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！

css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果相关推荐

css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
css使两个盒子并列_前端学习CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二引入方式 (1)行内式:在标记的style属性中设置C ...
css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
京东css3动画全屏海报_京东全屏CSS3动态海报抖动效果代码生成,海报上透明图片自动上下抖动带动感...
京东全屏CSS3动态海报抖动效果代码生成,海报上透明图片自动上下抖动带动感分享到: 作者:陈俊日期:2018-1-10 15:54 人气:4482 分类:装修助手教程重要提示:生成 ...
css布局属性与合成属性_如何使用CSS逻辑属性控制布局
css布局属性与合成属性 CSS逻辑属性定义了一种处理布局的新方法. 他们的主要目标是帮助开发人员支持不同的书写系统,例如从右到左(RTL)和垂直显示的脚本. 这些新功能可以通过逻辑属性而不是物理属性 ...
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
第5章第4节：如何给动画添加播放结束后隐藏的功能 [PowerPoint精美幻灯片实战教程]
您将在本节通过动画的选项设置,给动画添加播放结束后隐藏的功能.首先选择需要添加动画效果的对象. 然后给所选对象添加名为形状的动画效果. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接 ...
css3动画完成后执行某事件
方法一:setTimeout( )方法使用setTimeout( )设置指定多少毫秒后,执行某个事件.把时间设置为动画执行的时间.setTimeout() 是属于 window 的方法,该方法用于在 ...

css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果

设计思路与核心技术

效果实现与核心代码

css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果相关推荐

最新文章

热门文章