css 动画一个css 动画延线运动，纯css 。顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

一个css 动画延线运动，纯css

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="margin-left: 300px;margin-top: 200px;">

 
    <div class="perspective" style="width: 150px;height: 300px;overflow: hidden;">
    
      <div class="element" style="position: relative;width: 150px;height: 300px;">

      </div>
    
    </div>
  

</body>

<style>
  .perspective{
    perspective-origin: top left;
  perspective: 500px;
  /* background-color: pink; */
  border-bottom-color:transparent;
  border-right-color:transparent;
  transform: rotate3d(0, 1, 0, 133deg) skewY(-4deg);
  }
.element{
 
  border: 5px solid #757575;
  border-radius: 5px;
  /* border-bottom-color:transparent;
  border-right-color:transparent;
  transform: rotate3d(0, 1, 0, 106deg) skewY(-4deg); */
}
.element::before {
  content: '';
  display: inline-block;
  width: 5px;
  /* height: 45px; */
  height: 75px;
  background: linear-gradient(to bottom, #75E05E, rgba(128, 171, 120, 0.7));
  border-radius: 5px;
  box-shadow: 0 0 5px #e8ece8, 0 0 15px #b6e4b6, 0 0 30px #a0c9a0, 0 0 60px #abcfab;
  position: absolute;
  left: -5px;
  top:230px;
  animation: move 3s linear infinite;

}


@keyframes move {
  0% {
    transform: translateX(0);
  }
  75% {
    transform: translateY(-240px);
  }
  75.1% {
    transform: translateY(-270px) rotate(90deg);
  }
  100% {
    transform:translateY(-270px) translateX(121px) rotate(90deg);
  }
}





</style>

</html>