目前的C4D设计受到很多人的喜欢,因为其效果可以呈现得很有立体感,空间感。而且搭配一定的动画效果更可以突出灵动,高技术的视觉效果。本次将讲解下图C4D图动画效果制作,其主要由两大效果组成,闪光以及球体椭圆效果。本章先讲解闪光效果制作。效果可前往睿江云首页观看http://www.eflycloud.com。
& lt; !——切割图6——比;
& lt; div类=" service-top2 "祝辞& lt;/div>
& lt; !——切割图1、2、3、4,比;
& lt; div类=" service-cloud1 "祝辞& lt;/div>
& lt; div类=" service-cloud2 "祝辞& lt;/div>
& lt; div类=" service-cloud3 "祝辞& lt;/div>
& lt; div类=" service-cloud4 "祝辞& lt;/div>
& lt;/div>
<代码>。servicMainOut {
位置:相对;
宽度:1017 px;
身高:469 px;
背景:url (https://static.eflycloud.com/V5/pc/image/home/service.png)没有重演中心;
}
.service-top1 {
位置:绝对的;
上图:23 px;
右:416 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演-396 px 0;
宽度:224 px;
身高:89 px;
}
.service-top2 {
位置:绝对的;
前:66像素;
右:563 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演-620 px 0;
宽度:135 px;
身高:202 px;
}
.service-cloud1 {
位置:绝对的;
前:100像素;
右:840 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演0 0;
宽度:89 px;
身高:84 px;
}
.service-cloud2 {
位置:绝对的;
前:246像素;
右:671 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演-89 px 0;
宽度:126 px;
身高:120 px;
}
.service-cloud3 {
位置:绝对的;
前:228像素;
右:233 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演-215 px 0;
宽度:103 px;
高度:59 px;
}
.service-cloud4 {
位置:绝对的;
前:136像素;
右:50 px;
背景:透明的url (https://static.eflycloud.com/V5/pc/image/home/cloud.png)没有重演-317 px 0;
宽度:79 px;
高度:54 px;
}
<强>(2)闪光效果
闪光效果主要是通过控制切割图标签块透明度不透明度来实现。在动画过程中,使切割图的透明图过亮或过暗,令底图与切割图叠加呈现不同的效果.opacity=1时,闪亮度最高,全然呈现切割图;透明度=0时,闪亮度最暗,无亮灯状态,全然呈现底图状态。代码如下:
<代码> @-webkit-keyframes serviceFlash {
从,
0%,
,{
透明度:1;
}
40% {
透明度:0;
}
60%、100% {
透明度:1;
}
}
.service-top1 {
动画:serviceFlash 2 s无限;
}
.service-top2 {
动画:serviceFlash 0.65 s无限;
animation-delay: 1;
}//切割图1、2、3、4添加服务云
.service-cloud {
动画:serviceFlash 0.3年代2;
}教你如何制作C4D搭配动画效果
