首先不需要的样式可以先清除
①设置一个大div
②往大div中加图片 : 可以使用无序列表(ul>li>a>img)
③子绝父相定位 ul (只有先定位,才能实现后面的动画效果)
④给ul设置宽高(宽度必须设置,若不设置宽度li会挤下去,使浮动失效)
⑤给li加浮动
⑥设置动画每一帧的样式 @keyframes 动画名称{ 0%{} 25%{} 100%{}}
⑦应用动画:animation:动画名称 执行所需时长(若需设置无限循环:infinite);(鼠标滑过才有动画加hover上,需要自动轮播就加在ul)
⑧设置鼠标滑过时动画暂停:animation-play-state:paused;
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.banner{
width: 520px;
height: 280px;
border: 2px solid #000;
overflow: hidden;
position:relative;
}
ul{
width: 2080px;
height: 280px;
position:absolute;
top: 0;