Shulou(Shulou.com)06/02 Report--

The current C4D design is liked by many people because its effect can be presented with a sense of three-dimensional and space. And with certain animation effects can highlight the smart, high-tech visual effects. This time, we will explain the animation effect of the following figure C4D, which is mainly composed of two effects, the flash effect and the sphere ellipse effect. This chapter first explains the production of flash effect. The effect can go to the home page of Ruijiang Cloud to watch http://www.eflycloud.com.

1-1 C4D dynamic effect diagram

1. Preparation of base image and flicker image

(1) original design draft: at first, the design drawing given by the designer is like this ↓↓↓

1-2 original design draft

(2) Design draft analysis: how can we achieve the flicker effect? First of all, you need to analyze this picture: a base picture + flash cut. The analysis figure is as follows: ↓↓↓

1-3 base map

1-4 flash cut figure

The black block of the above 1-3 base image is the part that can be flashed, and the flash cut image is the figure of the corresponding digital label in the 1-4 figure. You can consider combining small flash cut images with one image to reduce the request processing of the picture.

2. Treatment of css flash effect

(1) the base map is consistent with the cutting drawing.

First, through positioning, the cutting drawing is perfectly matched with the base map, and combined into a complete 1-2 original design drawing. The code is implemented as follows:

.servicMainOut {position: relative; width: 1017px; height: 469px; background: url (https://static.eflycloud.com/V5/pc/image/home/service.png) no-repeat center;}. Service-top1 {position: absolute; top: 23px; right: 416px; background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat-396px 0; width: 224px; height: 89px Service-top2 {position: absolute; top: 66px; right: 563px; background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat-620px 0; width: 135px; height: 202px;} .service-cloud1 {position: absolute; top: 100px; right: 840px; background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat 00) Width: 89px; height: 84px;}. Service-cloud2 {position: absolute; top: 246px; right: 671px; background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat-89px 0; width: 126px; height: 120px;}. Service-cloud3 {position: absolute; top: 228px; right: 233px Background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat-215px 0; width: 103px; height: 59px;}. Service-cloud4 {position: absolute; top: 136px; right: 50px; background: transparent url (https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat-317px 0; width: 79px; height: 54px;}

(2) Flash effect

The flash effect is mainly achieved by controlling the transparency of the cutting icon block opacity. In the process of animation, make the transparent image of the cut image too bright or too dark, so that the superposition of the base map and the cut map shows a different effect. In opacity=1, the brightness is the highest, showing the cutting image completely; in opacity=0, the brightness is the darkest, there is no light, and the base image is completely presented. The code is as follows:

@-webkit-keyframes serviceFlash {from, 0%, to {opacity: 1;} 40% {opacity: 0;} 60% serviceFlash 100% {opacity: 1;}}. Service-top1 {animation: serviceFlash 2s infinite;}. Service-top2 {animation: serviceFlash 0.65s infinite; animation-delay: 1s } / / cut figures 1, 2, 3, 4 and add service-cloud.service-cloud {animation: serviceFlash 0.3s 2;}

According to the need, you can adjust the animation time, delay the execution of the animation time to achieve the speed of the animation flash and the animation flicker at different points. According to the above method, you can simply configure the flicker effect. But the animation is not easy to flash too much at once, otherwise it is easy to pass, giving people the feeling of chaos. So just do a single flash or control multiple flashes and several flashes.

The flash control of the official website will be summed up next time, please look forward to it!

The article comes from the official account: Ruijiang Cloud Computing

Ruijiangyun official website link: https://www.eflycloud.com/home?from=RJ0024

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.