html正方形轮播,图片轮播效果代码（html）

来源站点：w3cschool

来源网址：https://www.w3cschool.cn/lwp2e2/7cz212kd.html

安装本地测试后的源码：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

*{

margin: 0;

padding: 0;

}

#test{

position: relative;

width: 300px;

height: 200px;

overflow: hidden;

border: 1px solid #d4d4d4;

}

#test ul{

position: absolute;

top:0;

left: 0;

height:200px;

}

#test ul li{

float: left;

width: 300px;

height:200px;

}

@-webkit-keyframes myAnimation{

0%{

top:0;

}

40%{

top:-200px;

}

70%{

top:-400px;

}

100%{

top:-600px;

}

}

#test ul{

-webkit-animation-name:myAnimation;

-webkit-animation-duration:20s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

}

• 
• 
• 
• 

备忘-笔记与疑问：

最佳 写法：

意义：利于搜索引擎识别收录

避免堆积：

修改备忘：修改图片地址、修改时间、修改尺寸