汽车动画从左到右，然后隐藏汽车图像
汽车动画从左到右，然后隐藏汽车图像
提问于 2021-09-18 12:39:52
我需要制作一个从左到右移动的汽车的动画，然后隐藏图片和另一个相同的图片，但从右到左。有人能帮我一下吗？
这是我现在的代码：
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: calc(100% - 100px);
}
100% {
left: 0;
}
}<img class="car-movement" src="/assets/img/1car.svg" alt="car">
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-09-18 12:54:45
将图像放在溢出的div中。
在transform: rotateY和left上设置动画。
我使用了带有汽车表情符号的div，而不是图像。
.car-movement {
overflow: hidden;
font-size: 40px;
height: 50px;
}
.car-movement > .car {
position: relative;
display: inline-block;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
@keyframes run {
0% {
transform: rotateY(180deg);
left: -100px;
}
50% {
transform: rotateY(180deg);
left: 100%;
}
51% {
transform: rotateY(0deg);
left: calc(100% + 100px);
}
100% {
transform: rotateY(0deg);
left: -100px;
}<div class="car-movement">
<div class="car">?</div>
</div>
Stack Overflow用户
发布于 2021-09-18 12:55:06
如果我没记错的话，你想让那辆车从左向右行驶，然后藏在车窗的右边？然后，您应该编辑此代码部分：
0% {
left: -100px;
}
50% {
left: calc(100% - 100px);
}不是100px，而是写汽车图像长度。同样，在所有代码之前，您应该为主体编写以下代码：
body {
overflow-x: hidden;
}Stack Overflow用户
发布于 2021-09-18 12:58:22
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
left: calc(100% - 100px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
left: 0;
-webkit-transform: rotateY(0deg);
}
} <img class="car-movement" src="/assets/img/1car.svg" alt="car">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69234745
复制相关文章
相似问题
腾讯云开发者
