javascript - Bouncing text animation like DVD - Stack Overflow

admin管理员组

文章数量:1417686

I have done lots of research on popular websites but I am unable to find this bouncing and flying animation.

Demo

I want to add flying and bouncing watermark on my webpage.

I have done lots of research on popular websites but I am unable to find this bouncing and flying animation.

Demo

I want to add flying and bouncing watermark on my webpage.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 18, 2016 at 0:00 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 16, 2016 at 5:00 Risky JattRisky Jatt 3111 silver badge55 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

the bounce and flying effect you can develop using translate function

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

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; }
}

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

Try this, it my be helpfull...

Very simple use animate CSS https://daneden.github.io/animate.css/

It is very simple.

本文标签： javascriptBouncing text animation like DVDStack Overflow