javascript - 像 DVD 一样弹跳的文字动画

Question

我在热门网站上做了很多研究，但我无法找到这种弹跳和飞行的动画。

Demo

我想在我的网页上添加飞行和弹跳水印。

Answer 1

您可以使用translate 函数开发弹跳和飞行效果

#circle{
    width:50px;
    height:100px;
    background:red;
    border-radius:50%;
    margin-top:100px;
  }
p{
  text-align:center;
  color:yellow;
  }
.bounce{
  animation:bounce 5s linear 100;
  }
 @keyframes bounce{
    0%{
      transform:translate(0px,0px);
     
      }
    25%{
       transform:translate(100px,100px);
      
      }
    50%{
       transform:translate(200px,0px);  
      background:green;
      }
     75%{
       transform:translate(100px,-100px);
        

       }
   100%{
      transform:translate(0px,0px);
      
      }   
   }

<div id="circle" class="bounce"><p> your text here</p></div>