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

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

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

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

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