ae里的渐变过度在哪里

Posted 2023-04-08

你指的渐变是什么？
1、如果是两个画面之间的淡入淡出过渡效果，你可以在画面重叠的地方调整透明度，比如第一个画面过渡到第二个画面（层关系：第一个画面在上层，第二个画面在下层），过渡时间为1秒，你可以在第一个画面（层）的过渡开始帧，按T键，设定透明度关键帧为100%，过渡结束帧设定透明度关键帧为0%即可实现；
2、如果是从一个形状渐变成另一个形状，比如把人变成羊，你需要分别为两个图形加入Mask(遮罩)，再把羊层形状的遮罩复制人层，把人层形状复制到羊层，然后选中两层，分别加入reshape特效，在人层的reshape特效中设定形变百分比关键帧为0-100，在羊层的reshape特效中设定形变百分比关键帧为100-0，人层的遮罩关系为人遮罩到羊遮罩，羊层遮罩关系为羊遮罩到人遮罩。
3、如果只是颜色之间的渐变，你可以直接使用Ramp特效 参考技术A 两个层之间的吗？按T调出透明度，重叠的地方加关键帧。 参考技术B 如果只是固态层的颜色渐变，效果和预设<>生成<>梯度渐变，在特效控制台上调，颜色换成你要的颜色，再调控制点位置，如果觉得颜色太深，，选效果和预设<>颜色校正<>调调亮度对比度，曲线和自动颜色。

背景颜色渐变

 

背景颜色线性渐变【 linear-gradient】

语法：

background:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色);

起点：top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。

过度色：可以插入多个，表示多种颜色的渐变

demo

<style type="text/css" rel="stylesheet">
　　.box{
　　　　width: 100px;
　　　　height: 100px;
　　　　margin: 50px auto;
　　　　/*从上之下线性渐变*/
　　　　/*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/
　　　　background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　/*根据给定角度线性渐变*/
　　　　background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　/*从左上角到右下角线性渐变*/
　　　　background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　}
</style>

<div class="box"></div>