html 动态云层,动画模块之云层动画.html

动画模块之云层动画

*{

margin: 0;

padding:0;

}

ul{

height: 400px;

background-color: skyblue;

margin-top: 200px;

animation: change 5s linear 0s infinite alternate;

position: relative;

overflow: hidden;

}

li{

list-style: none;

width: 400%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

ul li:nth-child(1){

background-image: url(images/cloud_one.png);

animation: one 30s linear 0s infinite alternate;

}

ul li:nth-child(2){

background-image: url(images/cloud_two.png);

animation: two 30s linear 0s infinite alternate;

}

ul li:nth-child(3){

background-image: url(images/cloud_three.png);

animation: three 30s linear 0s infinite alternate;

}

@keyframes change {

from{

background-color: skyblue;

}

to{

background-color: black;

}

}

@keyframes one{

from{

margin-left: 0;

}

to{

margin-left: -100%;

}

}

@keyframes two {

from{

margin-left: 0;

}

to{

margin-left: -200%;

}

}

@keyframes three {

from{

margin-left: 0;

}

to{

margin-left: -300%;

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史