<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
transform: translate(-30px, 100px) rotate(-180deg) scale(1);
animation: ball 5s ease-in infinite;
}
@keyframes ball {
0%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
25%{transform: translate(400px, 500px) rotate(360deg) scale(2);}
50%{transform: translate(1000px,300px) rotate(-180deg) scale(1);}
75%{transform: translate(400px, -30px) rotate(360deg) scale(0.5);}
100%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
}
</style>
</head>
<body>
<img src="images/ball.jpg" alt="">
</body>
</html>
效果出来有3D效果,案例包含动画知识点
/*调用动画*/
/*animation: 动画名称 花费时间 运动曲线 等待时间 播放次数(无限播放) 是否反方向播放(alternate)*/
animation: move 2s linear 2s infinite alternate;/*默认是正方向播放*/
告辞!