晋网-山西生活门户     
三晋热线
adall01 adall02
当前位置: 晋网 > 教育

李南江HTML5培训课件-动画模块云层效果

责任编辑:柳暮雪    来源:晋网    时间:2017-02-13 16:48   热搜:动画,培训   阅读量:14783   

讲师:李南江

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>104-动画模块-云层效果</title>

<style>

*{

margin: 0;

padding: 0;

}

ul{

height: 400px;

background-color: skyblue;

margin-top: 100px;

animation: change 5s linear 0s infinite alternate;

position: relative;

overflow: hidden;

}

ul 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%;

}

}

</style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

郑重声明:此文内容为本网站转载企业宣传资讯,目的在于传播更多信息,与本站立场无关。仅供读者参考,并请自行核实相关内容。

栏目:教育

相关文章

adl03
http://www.sxjin.cn