我正在尝试沿抛物线(圆的 25%)路径移动图像，有人可以帮忙这样做吗..我尝试使用 csstransform:rotate(18deg)translate(0px, 100px) 多次将其移动，我的确切代码如下 -
*{
margin: 0;
padding: 0;
}
.dash{
position: absolute;
top: 70%;
left: 40%;
width:50px;
height:50px;
background: #000;
animation: animate 5s linear infinite;
transform-origin: top;
}
@keyframes animate{
0%{
transform: rotate(0deg) translate(0px , 0px);
}
10%{
transform: rotate(-5deg) translate(0px,-50px);
}
20%{
transform: rotate(-15deg) translate(0px,-100px);
}
40%{
transform: rotate(-20deg) translate(0px,-150px);
}
60%{
transform: rotate(-30deg) translate(0px,-200px);
}
80%{
transform: rotate(-35deg) translate(0px,-250px);
}
100%{
transform: rotate(0deg) translate(0px,-300px);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="dash"></div>
</body>
</html>在该 div 中我有一个图像..
要指定路径，请参阅此图片.. 
请帮助我..任何帮助将不胜感激
最佳答案
您可以简单地执行以下操作:
.dash {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: #000;
animation: animate 2s linear infinite alternate;
}
@keyframes animate {
0% {
transform: rotate(90deg) translate(150px);
}
100% {
transform: rotate(0deg) translate(150px);
}
}
html {
background:radial-gradient(circle 170px at top left,transparent 95%,#000,transparent) fixed;
}<div class="dash"></div>也像这样:
.dash {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: #000;
animation: animate 2s linear infinite alternate;
}
@keyframes animate {
0% {
transform: rotate(90deg) translate(150px) rotate(-90deg);
}
100% {
transform: rotate(0deg) translate(150px) rotate(0);
}
}
html {
background:radial-gradient(circle 170px at top left,transparent 95%,#000,transparent) fixed;
}<div class="dash"></div>关于html - 如何使用CSS变换以抛物线路径即曲线移动图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62558163/