css3 抛物线移动 |css平行四边形兼容ie

/* css代码 */
@keyframes parabola {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(300px, 300px);
}
100% {
transform: translate(600px, 0);
}
}
.box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation: parabola 3s ease-in-out infinite;
}

代码中的关键是使用了CSS3动画的@keyframes关键字来定义了抛物线的路径。这里定义了三个关键帧，对应0%, 50%和100%三个动画时刻。这样，元素就可以按照动画路径来运动。大家使用了translate()来控制元素在抛物线上的位置。关于translate()的详细介绍可以参考其他的相关教程。

接着大家使用了animation关键字，将动画绑定到元素上，然后设置了动画的一些属性，如动画时间（3s），动画效果（ease-in-out）和循环次数（infinite）。这样一来，抛物线移动的动画就完成了。

总体来说，通过上述代码的实现和理解，大家可以更好地掌握CSS3的动画效果和应用，提升网页的动态效果和使用体验。