Three applications of animated animation (floating clouds, rotating planets, cube synthesis)

xTable of Contents [1] Floating white clouds [2] Rotating planet [3] in front of cube synthesis

The detailed usage of animation animation is described earlier, this article mainly introduces the three effects of animation animation.

The floating white clouds

"Effect Demo"

"Brief Introduction"

Floating clouds mainly through the prospect of white clouds and white clouds to achieve three-dimensional floating effect. Vision and close-up use two background images respectively, by changing their background positioning to achieve the white cloud movement effect, by setting different animation duration to achieve the effect of staggered floating

"Main Code"

. Box{position:relative;Height:300px;width:500px;}. In1,.in2{position:Absolute;Height:100%;width:100%;background-size:cover;Animation:move 100s infinite linear alternate;}@keyframes Move{100%{background-position:500% 0;}}.in1{Background-image:url (' http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png '); }. in2{Background-image:url (' http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png ');animation-duration:10s;}

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

Source view

Spinning planet.

"Effect Demo"

"Brief Introduction"

The rotating planets are mainly implemented by the rotate () rotation function. In fact, the Blue Earth and the black Moon do not spin, just the visual rotation effect of their parent rotation.

"Code Demo"

. Box{Transform:Scale (0.5);position:relative;padding:1px;Height:300px;width:300px;}. Sunline{position:relative;Height:400px;width:400px;Border:2px solid Black;Border-radius:50%;margin:50px 0 0 50px;Display:Flex;Animation:Rotate 10s Infinite linear;}. Sun{Height:100px;width:100px;margin:Auto;Background-color:Red;Border-radius:50%;Box-shadow:5px 5px 10px red,-5px-5px 10px red,5px-5px 10px red,-5px 5px 10px Red;}. Earthline{position:Absolute; Right:0;Top:50%;Height:200px;width:200px;margin:-100px-100px 0 0;Border:1px solid Black;Border-radius:50%;Display:Flex;Animation:rotate 2s infinite linear;}. Earth{margin:Auto;Height:50px;width:50px;Background-color:Blue;Border-radius:50%;}. Moon{position:Absolute; Left:0;Top:50%;Height:20px;width:20px;margin:-10px 0 0-10px;Background-color:Black;Border-radius:50%;}@keyframes Rotate{100%{transform:Rotate (360deg);}}

<Divclass= "box">    <Divclass= "Sunline">        <Divclass= "Sun"></Div>        <Divclass= "Earthline">            <Divclass= "Earth"></Div>            <Divclass= "Moon"></Div>        </Div>    </Div></Div>

Source view

Cube-Body Synthesis

"Effect Demo"

"Brief Introduction"

This effect is achieved by setting the calculated delay time to achieve the effect of each side order animation of the cube. After the end of an animation, the effect of repeating animation is achieved by triggering the Animationend event reset Animation-name

"Code Demo"

ul{margin:0;padding:0;List-style:None;}. Box{Height:100px;width:100px;Perspective:500px;margin:50px 0 0 50px;}. List{position:relative;Height:100px;width:100px;Background-color:Blue;Transform-style:preserve-3d;Transform-origin:0 0 0;Animation:rotate 1s 10s 3 both linear;}. in{position:Absolute;Height:100px;width:100px;}. List. In:nth-child (6){Background-color:Pink;Transform-origin:Top;Animation:in6 2s both;}. List. In:nth-child (5){Background-color:LightGreen;Transform-origin: Right;Animation:in5 2s 2s both;}. List. In:nth-child (4){Background-color:LightBlue;Transform-origin:Bottom;Animation:in4 2s 4s both;}. List. In:nth-child (3){Background-color:lightcoral;Transform-origin: Left;Animation:in3 2s 6s both;}. List. In:nth-child (2){Background-color:Lightcyan;Animation:in2 2s 8s both;}. List. In:nth-child (1){Background-color:Lightsalmon;}. Box:hover. List{animation-play-state:paused;}. Box:hover. in{animation-play-state:paused;}@keyframes in6{100%{transform:Rotatex (90deg);}} @keyframes in5{100%{transform:Rotatey (90deg);}} @keyframes in4{100%{transform:Rotatex ( -90deg);}} @keyframes in3{100%{transform:Rotatey ( -90deg);}} @keyframes in2{100%{transform:Translatez (100px);}} @keyframes Rotate{100%{transform:Rotate3d (1,1,1,360deg);}}

<Divclass= "box">    <ulclass= "List"ID= "List">        <Liclass= "in"></Li>        <Liclass= "in"></Li>        <Liclass= "in"></Li>        <Liclass= "in"></Li>        <Liclass= "in"></Li>        <Liclass= "in"></Li>    </ul></Div>

List.addeventlistener (' Animationend ',function(e) {e= e | |event; vartarget = E.target | |e.srcelement; if(Target.nodename = = ' UL ') {List.style.animationName= ' None '; varChildren = list.getelementsbytagname (' li ');  for(vari = 0; I < children.length;i++) {Children[i].style.animationname= ' None '; } setTimeout (function() {list.style.animationName= ' rotate '; varChildren = list.getelementsbytagname (' li ');  for(vari = 0; I < children.length;i++) {Children[i].style.animationname= ' in ' + (i+1); }                },100); }},false);

Source view

Three applications of animated animation (floating clouds, rotating planets, cube synthesis)