console
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>resizeApi.php (128×107)</title>
</head>
<body style="background: #fff;">
<div class="container">
<img class="bus" src="https://i.loli.net/2020/10/31/LFCmdsrVtQjn3l5.png">
</div>
<div class="label"">
<div>加速</div>
<div>匀速</div>
<div>减速</div>
</div>
</body></html>
:root {
--time: 16s;
}
body {
margin: 50px;
}
.container {
margin-top: 200px;
width: 940px;
position: relative;
border-left: 1px solid #00000010;
border-right: 1px solid #00000010;
border-bottom: 1px solid #00000030;
margin: 0 10px;
}
.label {
width: 943px;
display: flex;
margin: 0 10px;
}
.label div {
flex: auto;
border-left: 1px solid #00000010;
border-right: 1px solid #00000010;
align-content: center;
justify-content: center;
justify-items: center;
text-align: center;
height: 15px;
}
.label div:nth-child(1){
animation: hideText1 var(--time) infinite;
}
.label div:nth-child(2){
flex: 0 0 auto;
width: 500px;
animation: hideText2 var(--time) infinite;
}
.label div:nth-child(3){
animation: hideText3 var(--time) infinite;
}
.bus {
height: 20px;
position: relative;
animation: moveBus var(--time) ease-in infinite;
}
@keyframes moveBus {
0% {
left: 0;
animation-timing-function: ease-in;
}
10% {
left: 0;
}
30% {
left: 200px;
animation-timing-function: linear;
}
33% {
left: 200px;
animation-timing-function: linear;
}
70% {
left: 700px;
animation-timing-function: ease-out;
}
73% {
left: 700px;
animation-timing-function: ease-out;
}
95% {
left: 900px;
}
100% {
left: 900px;
}
}
@keyframes hideText1 {
0% {
opacity: 1;
}
30% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hideText2 {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
33% {
opacity: 1;
}
70% {
opacity: 1;
}
73% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hideText3 {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
33% {
opacity: 0;
}
70% {
opacity: 0;
}
73% {
opacity: 1;
}
100% {
opacity: 1;
}
}