美文网首页设计小技能设计
教程:0基础,三分钟把文字变成炫酷动画

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

作者: 虎喵君 | 来源:发表于2016-11-03 16:35 被阅读1155次

    如果一个页面上,文字远多于图片,怎么才能让整个构成看起来不那么死板呢?

    其实只要让文字动起来就ok啦~

    录屏没有真实效果好,真正做完以后,尽享丝~滑~哦~

    依然是0基础,不用下载软件,一起在网页做一份这样的H5吧!【初心小太阳出品~】

    step1

    首先,打开自己习惯的H5制作工具。我一般用电脑自带的wps H5,所以就用这个演示。大家随意选择习惯的就好,大同小异哈。

    然后插入这样一张图:

    并将背景调整为图片底色:

    RGB模式:2/9/27

    得到如下图片:

    step2

    将文案插入H5中,每句都要用一个单独的文本框哦!

    step3

    到这里,页面排版就结束了,开始设置动画。

    ①将插入的图片设置为:【缩小】   开始时间0.4,其他默认:

    ②【圆润有型·自如随心】这句大标题,动画设置为【从上淡入】,【与上一动画同时】,开始时间0.6,持续时间2:

    ③将文案小字的第一行,动画设为【从下淡入】,【与上一动画同时】,开始时间0.6,持续时间2

    接下来的每行文案,其他项不变,开始时间比上一行+0.2


    ok,到这里就结束了,点击预览,看看是不是生成了丝滑的字幕文案呢?

    如果喜欢,就赞一个吧~

    相关文章

      网友评论

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

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