当前位置：文档之家 › 超级酷炫6种loading加载开场动画源文件下载PPT模板

超级酷炫6种loading加载开场动画源文件下载PPT模板

  • 格式：pptx
  • 大小：2.69 MB
  • 文档页数：11
超级酷炫6种loading加载开场动画源文件下载PPT模板

合集下载

炫酷动态ppt模板免费

炫酷动态ppt模板免费


Please add the title here
this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here. this is a sample text. insert your desired text here. Again. this is
this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here. this is a sample text.
this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here. this is a sample text.
Please add the title here
this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here. this is a sample text. insert your desired text here.
04 Please add the title here
this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here. this is a sample text. insert your desired text here. Again. this is a dummy text. enter your own text here
让人震撼的漂亮动态ppt模板(赶紧下载)(极具研究价值)(

让人震撼的漂亮动态ppt模板(赶紧下载)(极具研究价值)(


• Description of the contents
Content 01
Content 02
Content 03
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
• Description of the contents
Title in here
Title in here
ThemeGallery is a Design Digital Content & Contents
mall developed by Guild Design Inc.
Title in here
ThemeGallery is a Design Digital Content & Contents
Hot Tip
❖ How do I incorporate my logo to a slide that will apply to all the other slides?
– On the [View] menu, point to [Master], and then click [Slide Master] or [Notes Master]. Change images to the one you like, then it will apply to all the other slides.
Description of the contents
“ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
超级炫酷的动态科技PPT模板

超级炫酷的动态科技PPT模板

在此录入上述图表的综合描述说明，在此录入上述图表的上述图表的综合描述说明入。在此录入上述图表的 综合描述说明，在此录入上述图表的上述图表的综合描述说明入。在此录入上述图表的综合描述说明，在此 录入上述图表的上述图表的综合描述说明入。
10
第二章 SECTION
工作完成情况
（添加二级标题）
项目介绍
项目分布
20
添加标题
点击输入标题
点击输入标题
点击输入标题
点击输入标题
点击输入标题
在此输入详细文字介绍， 在此输入详细文字介绍， 在此输入详细文字介绍， 在此输入详细文字介绍， 在此输入详细文字介绍，
和详细信息。
和详细信息。
和详细信息。
和详细信息。
和详细信息。
21
添加标题 02
01
01 03
添加标题
第一PPT签约设计师原创作品， 盗卖者将被追究法律责任！
09
总体概述
点击输入标题
右键点击图片选择设置图片格式可直接替换图片，在此录 入上述图表的描述说明。您可以点击文字框输入您的描述 说明，或者通过复制粘贴。
点击输入标题
右键点击图片选择设置图片格式可直接替换图片，在此录 入上述图表的描述说明。您可以点击文字框输入您的描述 说明，或者通过复制粘贴，在此录入上述图表的综合描述 说明。
在此输入章节详细文字介绍，表达主题的含义合图表的意义，在此输入章节详细文字介绍，表达主 题的含义合图表的意义,在此输入章节详细文字介绍。
02 标题
在此输入章节详细文字介绍，表达主题的含义合图表的意义，在此输入章节详细文字介 绍，表达主题的含义合图表的意义,在此输入章节详细文字介绍。
03 标题
在此输入章节详细文字介绍，表达主题的含义合图表的意义，在此输入章节详细文字介绍，表达主 题的含义合图表的意义,在此输入章节详细文字介绍。
CSS动画实例：Loading加载动画效果（一）

CSS动画实例：Loading加载动画效果（一）

CSS动画实例：Loading加载动画效果（⼀）⼀些⽹站或者APP在加载新东西的时候，往往会给出⼀个好看有趣的Loading图，⼤部分的Loading样式都可以使⽤CSS3制作出来，它不仅⽐直接使⽤gif图简单⽅便，还能节省加载时间和空间。

下⾯介绍常见的⼀些Loading动画效果图的制作⽅法。

1．圆环型Loading这类Loading动画的基本思想是：先在呈现容器中定义⼀个名为loader的层，再对loader进⾏样式定义，使得其显⽰为⼀个圆环，最后编写关键帧动画控制，使得loader层旋转起来即可。

（1）旋转未封闭的圆环加载效果。

例如，设页⾯中有 <div class='loader'></div>，定义loader的样式规则如下：.loader{width:100px;height:100px;border-radius:50%;border:16px solid #f3f3f3;border-top:16px solid #ff0000;}则显⽰的图形如图1所⽰。

图1 圆环1若在上⾯的样式规则中加上语句：border-bottom:16px solid #0000ff;，则显⽰的图形如图2所⽰。

图2 圆环2如再同时将边框颜⾊修改为容器背景⾊，则显⽰的图形如图3所⽰。

图3 圆环3若只将样式规则中的“border-top:16px solid #ff0000;”改写为“border-top:16px solid #d8d8d8;”，即将图1边框上的红⾊改成背景⾊，则显⽰的图形如图4所⽰。

图4 圆环4编写关键帧定义，并在loader样式定义中加上animation属性设置语句，可以得到如图5所⽰的Loading动画效果。

完整的HTML⽂件内容如下。

<!DOCTYPE html><html><head><title>Loading加载动画</title><style>.container{margin: 0 auto;width: 300px;height:300px;position: relative;display:flex;justify-content:center;align-items:center;background:#d8d8d8;border: 4px solid rgba(255, 0, 0, 0.9);border-radius: 10%;}.loader{width:100px;height:100px;border-radius:50%;border:16px solid #d8d8d8;border-top:16px solid #ff0000;border-bottom:16px solid #0000ff;animation:load 2s linear infinite;}@keyframes load{0% { transform: rotate(0deg); }100% { transform:rotate(360deg); }}</style></head><body><div class="container"><div class='loader'></div></div></body></html>View Code图5 Loading动画效果（1）图1圆环对应的动画效果如图6所⽰。