动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-ITnose

.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>

.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>

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