我的PPT可以“吐泡泡”!你的可以吗?1分钟教会你怎么做

boyanx2个月前技术教程9

咕噜咕噜!我的PPT可以冒泡泡哦!想知道这样的效果怎么做出来吗?今天小编就来教大家制作这个效果!超级简单又好看哦!

一、“泡泡”制作

1、插入形状

首先我们新建一个PPT,然后点击【插入】——【形状】——【椭圆】,按住Shift键,画出一个正圆~

2、颜色设置

然后右键点击这个圆,选择【设置形状格式】——【填充】——【渐变填充】【类型】选择【射线】,【方向】为【右上角】,在【渐变光圈】中选择自己喜欢的颜色,适当设置一下透明度,最后记得勾选【线条】——【无线条】哦!

然后我们复制多个气泡,改变一下颜色和大小即可~

二、动画制作

1、动画设置

接下来我们选中所有的气泡,点击【路径动画】中选择【直线】【路径方向】【上】

2、延迟设置

我们会发现此时的泡泡是一起升上去的,为了制作出前后冒泡的时间差,我们可以调整一下路径的长度,然后为每个气泡设置不同的延迟时间~

预览一下效果,泡泡们就咕噜咕噜地冒出来啦!

三、气泡制作网站

1、blodmaker

如果觉得自己制作泡泡很麻烦的话,小编给大家推荐一个超可爱的泡泡制作网站——blodmaker!这个网站整个颜色都是粉粉的!简直少女心爆棚啦!

2、操作演示

操作也很简单!在这里小编给大家简单地演示一下~有需要的小伙伴可以自己去试试,这个网站是免费的,导出来的素材是svg格式的!也就是说不用我们自己再抠图的哦!

好啦,这就是小编今天要分享的内容啦!觉得有趣的话可以收藏哦!么么哒!

标签: svg路径动画

相关文章

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

Anime.js轻量级、高性能的 JavaScript 动画库

Anime.js(发音为 /'aen..me/)是一款轻量级、高性能的 JavaScript 动画库,专注于通过简洁 API 实现流畅的网页动画效果。以下是其核心特性和使用指南:一、核心特性与优势多场...

零基础教你学前端——47、SVG绘制路径

在SVG中,使用 path 标签来定义一个路径。它是一个单标签,基本语法为:尖角号 path,斜线尖角号。应用路径,我们可以绘制任意形状的图形。path标签的重要属性 d,用来定义绘制路径的命令,d...

【HarmonyOS Next之旅】兼容JS的类Web开发(五) -> Svg

目录1 -> 基础知识1.1 -> 创建Svg组件1.2 -> 设置属性2 -> 绘制图形3 -> 绘制路径4 -> 绘制文本4.1 -> 文本4.2 -&g...

【前端必备】Anime.js:用9KB的魔法,让动画“活”起来!

在当今的互联网时代,动画效果已经成为提升用户体验的关键因素之一。如果你还在为复杂的动画效果而烦恼,那么 Anime.js 绝对是你不能错过的选择!什么是 Anime.js?Anime.js 是一款轻量...

手把手教你H5实现工厂游戏的CSS动画效果「实践」

作者:吴冠禧 WecTeam转发连接:https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。