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

Answer 2

＆＃13;

＆＃13;

body { background: #222; }
.box {
  background-color: #61ab20;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 3px #000;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}
.box b {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3673cf;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}

＆＃13;

<div class="box"><b></b></div>

＆＃13;

＆＃13;

＆＃13;

试试这个，我的帮助......

Answer 3

非常简单地使用动画CSS https://daneden.github.io/animate.css/

这很简单。