2018年1月1日更新
整理了完整文档下载:https://pan.baidu.com/s/1eRSk2IY
备份 链接: https://pan.baidu.com/s/1slbXq8l 密码: etkh
Prezi主要通过在同一平面的缩放和移动产生的类似3D效果在国内深受欢迎,但是prezi并且没有中文版,这在国内使用有了很大的限制,很多的效果必须通过修改CSS才能实现,透明度和渐变色彩在软件当中没有直观的命令,只能通过CSS修改,这一过程比较繁琐复杂,本文就透明度和渐变色彩制作,做一个详细独特的介绍。
1.Background(背景)渐变色
Prezi的CSS编辑器,有一段代码是关于background(背景)。如果改变这时候的背景颜色,这样行下面的gradStar(开始)和gradEnd(结束)会变化。这就是控制背景颜色的代码如图1。代码为:
gradStar:#f6f6f6
gradEnd:#f6f6f6
由于颜色代码#f6f6f6(R:246 G:246 B:246) 所对应白色,且首尾颜色一样,所以背景是纯色。
图1
如果需要达到渐变效果,只需要复制下你需要颜色的对应代码,然后在CSS编辑器中star或者end位置修改,不同的颜色就就会产生渐变。代码为:
gradEnd:#6FF6C1
gradStar:#51FF47
由于颜色代码#f6f6f6 (R:111 G:246 B:193)所对应浅绿,#51FF47 (R:81 G:255 B:71)对应的是草绿色,且首尾不一样,所以背景是浅绿到深绿的渐变。如图2.
图2
2.Frame(框)&Arrows(箭头)渐变色(以cirle frame为例)
Prezi的Frame%Arrows有以下几个选项,分别是 Bracket Frame(框)/ Circle Frame(圆圈)/Rectangle Frame(矩形)/Arrow (箭头)/Line(线) /几个选项,是Prezi中最常用的一些工具。下面以Circle Frame(圆圈)为例,说明一下渐变色的修改。
Prezi的CSS编辑器,有一段代码是关于frame.circle(圆圈)。如果改变这时候的
图3
圆圈颜色,这样行下面的gradStar(开始)和gradEnd(结束)会变化。这就是控制圆圈颜色的代码。
代码为:
frame.circle{
gradEndColor:#fff;
gradEndAlpha: 1;
gradStartAlpha: 0.3;
gradStartColor: #fff;
}
2.1同一种颜色的渐变色需要借助不同的透明度改变(Alpha)
gradEnd和gradStart颜色代码#fff所对应的是同一种颜色,但是由于Alpha(透明度)的不一样产生了渐变效果,
gradEndAlpha: 1;不透明度100%,
gradStartAlpha: 0.3;不透明度30%
所以产生了渐变效果。如图4
图4
2.2同一种透明度下面的渐变效果要靠不同颜色来呈现,
代码:
frame.circle
{
gradEndAlpha:1;
gradEndColor:#E84023;
gradStartAlpha:1;
gradStartColor:#E8BD32;
}
gradEndAlpha和gradStartAlpha的值都是1,不透明度100%,gradEndColor:#E84023(R:232 G:64 B:35)代表红色,gradStartColor:#E8BD32(R:232 G:189 B:50)代表橙色,所以显示的就是红色到橙色的渐变色。如图5
图5