css3动画小汽车移动 |css3实现简单滚动条

/* 设置小汽车的样式 */
.car {
width: 80px;
height: 60px;
background-color: #F44336;
position: absolute;
bottom: 20px;
left: -80px;
animation: carMove 5s forwards;
}
/* 创建动画 */
@keyframes carMove {
0% {
left: -80px;
}
100% {
left: calc(100% + 80px);
}
}

在上面的代码中，大家首先给小汽车定义了一些基本的样式属性，然后设置了它的位置和动画效果。大家创建了一个名为 carMove 的动画，它将在 5 秒内将小汽车从左侧移动到网页的右侧，最后停留在右侧边缘。大家使用 forwards 属性来让小汽车在动画结束时保留最后一个关键帧的状态，这样小汽车就不会回到原来的位置。

最后，大家将动画应用于小汽车的样式中，这样就可以让整个效果生效了。