我有一条线。我从左到右移动它。哪个好。但现在我想转向它或像蛇一样。我怎样才能做到这一点?
.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
background-color: red;
animation: move 5s;
}
@-webkit-keyframes move {
from {}
to {
left: 50px;
}
}
<div class="top"></div>
不确定这是不是你想要的,但希望它有所帮助。
.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
top: 0;
background-color: red;
animation: move 5s 1s forwards;
}
@-webkit-keyframes move {
0% {
left: 0px;
top: 0px;
}
25% {
left: 50px;
}
50% {
top: 20px;
transform: rotate(180deg);
}
100% {
left: 0;
top: 20px;
transform: rotate(180deg);
}
}
<div class="top"></div>