【云速建站】10分钟出特效系列(二)

举报
JohnnyKou 发表于 2019/04/13 00:24:41 2019/04/13
【摘要】 本系列介绍一下简单易用的页面设计特效。备好素材,10分钟就是出效果! 系列二,新品发布,制造震撼出场的效果。PC预览效果 http://test.fallout5.cn/designtips2 (PC和手机端均已实现)

本系列介绍一下简单易用的页面设计特效。备好素材,10分钟就是出效果!

系列二,新品发布,制造震撼出场的效果。PC预览效果 http://test.fallout5.cn/designtips2  (PC和手机端均已实现)

IMB_w2jKmo.GIF

image.png

提前准备好素材

  1. 一张宣传主题和云特效的png图,背景需要透明。这里以手机为例(自家的不侵权)

  2. 一段特性描述或文案,用于添加链接。

制作步骤

  1. 创建一个空白页面,不使用底板或页脚,设置背景颜色

  2. 放入图片主题,设置动画效果从上到下

  3. 放入图片主题,设置动画效果从小到大

  4. 加入文字描述,设置动画效果从下到上,并且延时时长为上一段动画播放结束,设置超链接

  5. 一件生成手机版

  6. 调节文字大小和位置

  7. 完成

详细步骤,step by step

创建一个空白页面,不使用底板或页脚,设置背景颜色

image.png

背景颜色-填充类型改为渐变色

image.png

在增加一个渐变色值,青-紫-灰

image.png

修改背景填充方式,圆形,从左开始,从下开始

image.png

应用渐变背景

image.png

放入图片主题,设置动画效果从上到下

image.png

image.png

image.png

放入图片主题,设置动画效果从小到大

image.png

image.png

image.png

加入文字描述,设置动画效果从下到上,并且延时时长为上一段动画播放结束,设置超链接

image.png

image.png

image.png

添加其他图片,使用同样的动画设置,PC版即完成,接下来生成手机版

image.png

在页面管理一件生成手机版

image.png

生成后格式和图片的大小还需要优化

image.png

调节文字大小和位置

image.png

完成

image.png


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。