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

This article mainly introduces how to use pure CSS3 to create realistic multi-layer cloud animation effects related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this article on how to use pure CSS3 to create realistic multi-layer cloud animation special effects article will have a harvest, let's take a look at it.

CSS style

The .sky element that serves as the background of the sky sets a fixed height, uses relative positioning, and uses overflow: hidden; to hide elements that are out of range. The color of the sky is initially set to a lighter blue # 007fd5. Then set up a CSS3 animation animation of sky_background for the sky background, which changes the color of the sky background from light blue to dark blue in 50 seconds, the animation-timing-function of the animation is ease-out, and the number of iterations of the animation animation-iteration-count is an infinite loop.

In this special effect, each element is set to the transform: translate3d (0,0,0) attribute, which is used to turn on the 3D effect of GPU and improve the display performance.

.sky {

Height: 480px

Background: # 007fd5

Position: relative

Overflow: hidden

-webkit-animation: sky_background 50s ease-out infinite

-moz-animation: sky_background 50s ease-out infinite

-o-animation: sky_background 50s ease-out infinite

Animation: sky_background 50s ease-out infinite

-webkit-transform: translate3d (0,0,0)

-ms-transform: translate3d (0,0,0)

-o-transform: translate3d (0,0,0)

Transform: translate3d (0,0,0)

}

@ keyframes sky_background {

0% {

Background: # 007fd5

Color: # 007fd5

}

50% {

Background: # 000

Color: # a3d9ff

}

100% {

Background: # 007fd5

Color: # 007fd5

}

}

Cloud 1 uses the first cloud PNG image as the background image, using absolute positioning and left alignment relative to the sky container. The height is equal to the sky and the width is three times the width of the sky container. And perform cloud_one CSS3 animation. This animation modifies the left property of the cloud layer so that the cloud moves horizontally.

.clouds _ one {

Background: url ("img/cloud_one.png")

Position: absolute

Left: 0

Top: 0

Height: 100%

Width: 300%

-webkit-animation: cloud_one 50s linear infinite

-moz-animation: cloud_one 50s linear infinite

-o-animation: cloud_one 50s linear infinite

Animation: cloud_one 50s linear infinite

-webkit-transform: translate3d (0,0,0)

-ms-transform: translate3d (0,0,0)

-o-transform: translate3d (0,0,0)

Transform: translate3d (0,0,0)

}

@ keyframes cloud_one {

0% {

Left: 0

}

100% {

Left:-200%

}

}

The CSS3 animation of Cloud 2 and Cloud 3 is basically similar to Cloud 1, except that the duration of the animation animation-duration is different. The duration of Cloud 1 is 50 seconds, Cloud 2 is 75 seconds, and Cloud 3 is 100 seconds. In this way, the animation time of each cloud is different, which will get some poor visual effect of the background.

This is the end of this article on "how to create realistic multi-layer cloud animation effects with pure CSS3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to create realistic multi-layer cloud animation effects with pure CSS3". If you want to learn more, you are welcome to follow the industry information channel.

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.