- 首页 > it技术 > >
轮播图 - 锐客网* {
margin: 0;
padding: 0;
list-style: none;
}.wrap {
width: 400px;
height: 300px;
margin: 100px auto;
/* border: 2px solid blueviolet;
*/
overflow: hidden;
}.content {
/* 容器的大小足够放四张图片 */
width: 1600px;
height: 300px;
/* background-color: chartreuse;
*/
/* margin-left: -400px;
*//*动画名称
animation-name: move;
*/
/* animation-duration: 5s;
*/
/* 动画播放速度 */
/* animation-timing-function: linear;
*/
/* 动画播放次数 */
/* animation-iteration-count: infinite;
*/
/* steps(),逐帧播放 有多少张图片就填多少个数 */
/*动画名称move动画时长4sinfinite循环播放*/
animation: move 4s infinite steps(4);
/* 动画延迟时间
animation-delay: 4s;
动画填充模式
animation-fill-mode: backwards;
animation-play-state: paused;
animation-direction: alternate;
*/}/* 光标滑过动画暂停 */
.content:hover {
animation-play-state: paused;
}.content ul li {
width: 400px;
height: 300px;
float: left;
}/* .content ul li:nth-child(odd){
background-color: cornflowerblue;
}.content ul li:nth-child(even){
background-color: cyan;
} */
.content ul li img {
width: 400px;
height: 300px;
/* background-size: 100%;
*/
}@keyframes move {
from {
margin-left: 0;
}to {
/* 宽度要足够容纳四张图片的宽度 */
margin-left: -1600px;
}
}
推荐阅读
