Animation three applications (floating white clouds, rotating planet, cube synthesis), animation cube

Animation three applications (floating white clouds, rotating planet, cube synthesis), animation cube
× Contents [1] floating white clouds [2] rotating planet [3] Cube synthesis front words

I have previously introduced the usage of animation. This article mainly introduces three effects of animation.

 

Floating white clouds

[Effect demonstration]

[Brief introduction]

The floating white clouds mainly realize the three-dimensional floating effect through the distant and near-Scenic white clouds. Two background images are used respectively for the foreground and near scenes to achieve the effect of moving the white clouds by changing the background orientation, and the effect of staggered floating is achieved by setting different animation durations.

[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;}

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

View Source Code

 

Rotating planet

[Effect demonstration]

[Brief introduction]

The rotated planet is mainly implemented through the rotate () Rotation function. In fact, the Blue Earth and the Black Moon did not rotate, but the visual rotation effect formed by its 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);}}

<div class="box">    <div class="sunline">        <div class="sun"></div>        <div class="earthline">            <div class="earth"></div>            <div class="moon"></div>        </div>    </div></div>

View Source Code

 

Cube Synthesis

[Effect demonstration]

[Brief introduction]

This effect is mainly achieved by setting the delay time after calculation to achieve the ordered animation of each side of the cube. After an animation ends, you can reset the animation-name by triggering the animationend event.

[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);}}

<div class="box">    <ul class="list" id="list">        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>    </ul></div>

list.addEventListener('animationend',function(e){    e = e || event;    var target = e.target || e.srcElement;    if(target.nodeName == 'UL'){        list.style.animationName = 'none';        var children = list.getElementsByTagName('li');        for(var i = 0; i < children.length;i++){            children[i].style.animationName = 'none';        }        setTimeout(function(){            list.style.animationName = 'rotate';            var children = list.getElementsByTagName('li');            for(var i = 0; i < children.length;i++){                children[i].style.animationName = 'in' + (i+1);            }                },100);            }},false);

View Source Code