This is the first article I participated in beginners’ introduction
The clouds change the effect
preface
Summer solstice rain, winter solstice snow fluttering. Qingze such as Cicanyi, thick ze dye ink rendering. Things change when the wind blows. Cloud heart lock clear sorrow, eternal clouds still! Clouds – have been looked up to for thousands of years. Look at it when you are lonely, though loneliness is still winding; Look up to it when happiness, look forward to happiness longer! Cloud – mysterious but unreservedly will present themselves to everyone, sometimes quiet kind; Sometimes deep introverted; Sometimes overflowing with love; Sometimes she is charming; Sometimes warm as fire; Sometimes as naughty as children, leisurely looking down at the earth, busy people. Want to be a flickering cloud in the sky? Come make it happen with me!!
The preparatory work
The material to prepare is actually very simple, just three pictures of clouds at different levels. Since the pictures are white and transparent, they are basically blank, so let’s open them as links…
Begin to implement
The first step –
Let’s start with a sky background.
Create a div that is 100% wide, 400px high, with a background color of #007fd5, position:relative, and overflow: Hidden.
The second step –
Then put the three cloud pictures under the container in the sky.
Prepare three that are three times as wide as the sky and as high as the sky, using absolute position. Top :0px,left:0px, div with three cloud images as background, put them under the sky div in sequence.
The third step –
This is the most important step, to animate the design, use the @keyframes attribute.
1, the first sky animation, the effect is the sky color alternating light and dark changes.
Use @keyframes to describe the animation effect rules, animation name change, start animation sky background color # 007FD5, middle animation sky background color #000, end animation sky background color change back to # 007FD5
2, and then the cloud movement animation, the effect is to move left.
Use @keyframes to describe the animation effect rule, the animation name run, the initial animation cloud position is left:0px; Top :0px, end animation cloud position is left:-100%; top:0px;
Step 4 –
So how do we get him moving when we’re done? So we’re going to use the animation property.
The animation property is a shorthand property used to set six animation properties.
Animation-name: specifies the name of the keyframe to be bound to the selector
Animation-duration: Specifies the time, in seconds or milliseconds, to complete the animation
Animation-timing-function: specifies the speed curve of the animation
Animation-delay: Specifies the delay before the animation starts
Animation-rotund-count: Specifies the number of times an animation should be played
Animation-direction: specifies whether the animation should be rotated backwards
– step 5
We’re done. All we need is the wind. Let’s get the animation going.
The first is the sky animation, the animation name change, the time it takes to complete the animation 5s, the animation speed curve ease-out, the number of times the animation should play infinite, the delay before the animation starts and whether the animation should take turns playing backwards we don’t need here, so we don’t need to add a value.
Next is the animation of clouds, the animation name is run, and the time spent to complete the animation is 5s, 7s and 10s, respectively, in order to make the three cloud pictures have a sense of overlapping layers. The other values should be the same as the animation of the sky.
Step 6 –
The last is the time to witness the miracle!!
conclusion
The first time to write an article, the whole day, for me this kind of writing is not good people, it is really difficult!! Personally, I don’t feel very good about it, I hope you won’t be too critical of me, haha… This is when I first learn CSS3 to learn, the effect or can see, animation time we can adjust according to their preferences, can be fast or slow. Finally, attach the CSS code
*{margin:0; padding:0}; body{background:#12b9ff; text-align:center} .sky{width:100%; height:400px; background:#007fd5; position:relative; overflow:hidden; animation:change 5s ease-out infinite; -moz-animation:change 5s ease-out infinite; -webkit-animation:change 5s ease-out infinite; -ms-animation:change 5s ease-out infinite} .colund1{width:300%; height:400px; background:url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e613ca836c841f9941c46a8a5817457~tplv-k3u1fbpfcp-waterm ark.image); position:absolute; top:0; left:0; animation:run 5s ease-out infinite; -moz-animation:run 5s ease-out infinite; -webkit-animation:run 5s ease-out infinite; -ms-animation:run 5s ease-out infinite} .colund2{width:300%; height:400px; background:url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c3e2ea6459d4b338681a5dbcd362abb~tplv-k3u1fbpfcp-waterm ark.image); position:absolute; top:0; left:0; animation:run 7s ease-out infinite; -moz-animation:run 7s ease-out infinite; -webkit-animation:run 7s ease-out infinite; -ms-animation:run 7s ease-out infinite} .colund3{width:300%; height:400px; background:url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba731db637f947af9f072d6cdda2ae32~tplv-k3u1fbpfcp-waterm ark.image); position:absolute; top:0; left:0; animation:run 10s ease-out infinite; -moz-animation:run 10s ease-out infinite; -webkit-animation:run 10s ease-out infinite; -ms-animation:run 10s ease-out infinite} @keyframes change{ 0%{background:#007fd5} 50%{background:#000} 100%{background:#007fd5} } @-moz-keyframes change{ 0%{background:#007fd5} 50%{background:#000} 100%{background:#007fd5} } @-webkit-keyframes change{ 0%{background:#007fd5} 50%{background:#000} 100%{background:#007fd5} } @-ms-keyframes change{ 0%{background:#007fd5} 50%{background:#000} 100%{background:#007fd5} } @keyframes run{ 0%{left:0; top:0} 100%{left:-100%; top:0} } @-moz-keyframes run{ 0%{left:0; top:0} 100%{left:-100%; top:0} } @-webkit-keyframes run{ 0%{left:0; top:0} 100%{left:-100%; top:0} } @-ms-keyframes run{ 0%{left:0; top:0} 100%{left:-100%; top:0} }Copy the code