轮播图效果的练习也是之前做的了,今晚重新做几乎忘的差不多了
所以先回顾下轮播图效果实现的理论基础
实现轮播图有两大要点:
1、设置@keyframes 动画名{
form{初始状态}
to{结束状态}
}
2、给轮播元素添加animation属性
animation:动画名称 执行时间 执行次数(infinite循环)运动形式(steps(5)分步骤执行 linear匀速,默认加速执行)延迟执行时间;
效果图
HTML结构
<body>
<div class="page">
<div class="imge">
<p class="one">1</p>
<p class="two">2</p>
<p class="thr">3</p>
<p class="for">4</p>
<p class="fiv">5</p>
</div>
</div>
</body>
css样式
<style>
*{
margin: 0;
padding: 0;
}
.page{
width: 200px;
height: 200px;
border:black 5px solid;
/* 溢出裁剪 */
overflow: hidden;
margin: 0 auto;
}
.imge{
width: 1000px;
height: 200px;
/* animation :动画名称 时间 播放方式 播放步骤 */
animation: play 5s infinite steps(5);
}
.imge p{
width: 200px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
}
.imge .one{
background: chartreuse;
}
.imge .two{
background: chocolate;
}
.imge .thr{
background: cornflowerblue;
}
.imge .for{
background:pink;
}
.imge .fiv{
background: orange;
}
@keyframes play{
form{margin-left:0px;}
to{margin-left:-1000px;}
}
</style>