美文网首页绘画工具癖首页投稿(暂停使用,暂停投稿)
教程:0基础,2步做出中国风的花瓣飞舞动画效果

教程:0基础,2步做出中国风的花瓣飞舞动画效果

作者: 虎喵君 | 来源:发表于2016-11-07 16:47 被阅读1032次

没错我又来分享好玩的H5教程啦~

这次是我个人比较喜欢的风格——中国风。这种花瓣飞舞的动态我已经眼馋很久了,素材来自网络,侵权的话请联系我,立刻删除。

栗子宝宝出品,真的很美呀~关键是花瓣并不是飞向相同的方向,更有被风吹起的飘逸美感啦~

依然是0基础立刻上手的教程,super简单~

栗子出品

step1

首先,打开自己喜欢的H5制作页面。我用的是电脑自带的wps H5。(下次是不是可以不说这句话了,我每次都是复制粘贴的……)

然后,准备两张图。一张是地上飘落花瓣的背景图。另一张,是半透明的花瓣。

将花瓣复制四份,和背景一起插入到编辑画布中。

step2

为花瓣添加动画效果。点击【动画】-【添加动画】

为①号花瓣设置:【向右转出】,持续时间25。其他默认。

为②③④号花瓣设置:【向右淡出】,【与上一动画同时】。持续时间分别为:40、40、70。

动画效果样例

好啦,点击预览,看看花瓣们是不是在页面上随意轻舞了呢?

最后,如果喜欢这类教程,就点个赞留个言吧,感谢支持!

如果想看往期教程,点击这里:

教程:0基础,三分钟把文字变成炫酷动画

教程:0基础0软件,三分钟制作纸卷炫酷动画

相关文章

网友评论

本文标题:教程:0基础,2步做出中国风的花瓣飞舞动画效果

本文链接:https://www.haomeiwen.com/subject/waoiuttx.html