How to move a picture in a parabolic path ie.curved using CSS transform?

问题: I am trying to move an image along a parabolic(25% percent of a circle) path, can someone help in doing so.. I have tried to use csstransform: rotate(18deg) translate(0px,1...

问题:

I am trying to move an image along a parabolic(25% percent of a circle) path, can someone help in doing so.. I have tried to use csstransform: rotate(18deg) translate(0px,100px) multiple times to move it around my exact code was as following -

*{
    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>

Inside that div i have an image.. TO SPECIFY THE PATH SEE THIS IMAGE.. enter image description here Please help me..Any help will be appreciated


回答1:

You can simply do like below:

.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>

Also like this:

.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>

  • 发表于 2020-06-27 21:49
  • 阅读 ( 137 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除