PS: 其实最重要的一点就是要形成闭环
别说话, 线上DEMO
一共分四个节点
拿红色来说, 0, -100 100 0
拿黄色来说: -100 0 100 -100
灰色点区域是展示区域,
一摸一样的子元素复制一份, 就是红色跟黄色,
重要的事情说三遍: 要闭环, 要闭环
最终结果, 请在交易虎, 代练商品买家聊天页面查看, 哈哈
<div class="parent">
<div class="child child-0"></div>
<div class="child child-1"></div>
</div>
.parent {
width: 200px;
height: 100px;
background-color: gray;
position: relative;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.child {
width: 300px;
height: 100px;
animation: 10s linear infinite;
position: absolute;
opacity: .9
}
.child-0 {
background-color: red;
animation-name: carousel0;
}
.child-1 {
background-color: yellow;
animation-name: carousel1;
transform: translateX(100%);
}
@keyframes carousel0 {
form {
transform: translateX(0);
}
49.99% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes carousel1 {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(0);
}
99.99% {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}