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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.