console
<br />
<div class="div">
<div class="item1 div3">
办公家具
</div>
<div class="item2 div4">
免费预约上门设计
</div>
</div>
.div {
position: relative;
width: 170px;
height: 70px;
overflow: hidden;
background: #f60;
color: #fff;
font-family: '黑体';
}
.item1 {
position: absolute;
top: 12px;
left: -170px;
width: 170px;
line-height: 20px;
font-size: 20px;
text-align: center;
letter-spacing: 4px;
}
@keyframes div1 {
0% {
top: 12px;
left: -170px;
}
3% {
top: 12px;
left: -170px;
}
10% {
top: 12px;
left: 0;
}
20% {
top: 12px;
left: 0;
}
23% {
top: -20px;
left: 0;
}
26% {
top: 12px;
left: 0;
}
30% {
top: 17px;
left: 0;
}
35% {
top: 7px;
left: 0;
}
40% {
top: 12px;
left: 0;
}
100% {
top: 12px;
left: 0;
}
}
.item2 {
position: absolute;
top: 70px;
left: 0;
width: 170px;
line-height: 16px;
font-size: 16px;
text-align: center;
}
@keyframes div2 {
0% {
top: 70px;
}
19% {
top: 70px;
}
20% {
top: 32px;
}
23% {
top: 28px;
}
26% {
top: 37px;
}
30% {
top: 42px;
}
35% {
top: 32px;
}
40% {
top: 37px;
}
100% {
top: 37px;
}
}
@keyframes div3 {
0% {top: 12px;left: -170px;}
3% {top: 12px;left: -170px;}
10% {top: 12px;left: 0;}
20% {top: 12px;left: 0;}
23% {top: -70px;left: 0;}
26% {top: 14px;left: 0;}
30% {top: 17px;left: 0;}
35% {top: 7px;left: 0;}
40% {top: 12px;left: 0;}
100% {top: 12px;left: 0;}
}
@keyframes div4 {
0% {top: 70px;}
19% {top: 70px;}
20% {top: 30px;}
23% {top: 26px;}
26% {top: 39px;}
30% {top: 42px;}
35% {top: 32px;}
40% {top: 37px;}
100% {top: 37px;}
}
.div1 {
animation: div1 5s linear infinite;
}
.div2 {
animation: div2 5s linear infinite;
}
.div3 {
animation: div3 5s linear infinite;
}
.div4 {
animation: div4 5s linear infinite;
}