美文网首页
Css3实现动态轮播效果

Css3实现动态轮播效果

作者: 安北分享 | 来源:发表于2021-09-03 14:55 被阅读0次
 定义动态效果
@keyframes move {
0%{transform: translateX(0%);}
25%{transform: translateX(0%);}
// 25%{transform: translateX(-5.5rem);}
// 45%{transform: translateX(-5.5rem);}
50%{transform: translateX(-5.5rem);}
// 70%{transform: translateX(-11rem);}
75%{transform: translateX(-5.5rem);}
// 95%{transform: translateX(-5.5rem);}
100%{transform: translateX(0%);}
}
.box{
  width: 11rem;
  display:flex;
  animation:move 10s linear infinite;
}

相关文章