<!DOCTYPE html> <html> <head> <style> .falling-banner{ position:absolute; top:100px; width:250px; height:150px; background-color:lightblue; animation:fallingBanner 1s 1; } .string{ display:block; width:10%; height:10%; border-top-left-radius:50%; border-top-right-radius:50%; border:2px solid red; margin:auto; border-bottom:none; } .perspective-container{ width:100%; height:100%; background-color:rgb(210,210,210); border-radius:10px; perspective: 400px; } .vibrating-box{ width:100%; height:100%; background-color:red; color:white; border-radius:10px; transform:rotateX(0deg); transform-origin:top; animation:vibratingBox 2s 1; animation-delay:1s; box-shadow:3px 3px 2px 0px rgba(210,210,210,1); } @-webkit-keyframes vibratingBox{ 0%{ transform:rotateX(50deg); } 12.5%{ transform:rotateX(0deg); } 25%{ transform:rotateX(37.5deg); } 37.5%{ transform:rotateX(0deg); } 50%{ transform:rotateX(28.125deg); } 62.5%{ transform:rotateX(0deg); } 75%{ transform:rotateX(21deg); animation-timing-function:ease-in; } 100%{ transform:rotateX(0deg); } } @keyframes fallingBanner{ 0%{ top:-300px; animation-timing-function:ease-in; } 100%{ top:100px; } } </style> </head> <body> <div class="falling-banner"> <span class="string"></span> <div class="perspective-container"> <div class="vibrating-box"> </div> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <style> .falling-banner{ position:absolute; top:100px; width:250px; height:150px; background-color:lightblue; -webkit-animation:fallingBanner 1s 1; } .string{ display:block; width:10%; height:10%; border-top-left-radius:50%; border-top-right-radius:50%; border:2px solid red; margin:auto; border-bottom:none; } .perspective-container{ width:100%; height:100%; background-color:rgb(210,210,210); border-radius:10px; perspective: 400px; } .vibrating-box{ width:100%; height:100%; background-color:red; color:white; border-radius:10px; transform:rotateX(0deg); transform-origin:top; -webkit-animation:vibratingBox 2s 1; -webkit-animation-delay:1s; box-shadow:3px 3px 2px 0px rgba(210,210,210,1); } @-webkit-keyframes vibratingBox{ 0%{ transform:rotateX(50deg); -webkit-transform:rotateX(50deg); } 12.5%{ transform:rotateX(0deg); -webkit-transform:rotateX(0deg); } 25%{ transform:rotateX(37.5deg); -webkit-transform:rotateX(37.5deg); } 37.5%{ transform:rotateX(0deg); -webkit-transform:rotateX(0deg); } 50%{ transform:rotateX(28.125deg); -webkit-transform:rotateX(28.125deg); } 62.5%{ transform:rotateX(0deg); -webkit-transform:rotateX(0deg); } 75%{ -webkit-transform:rotateX(21deg); -webkit-animation-timing-function:ease-in; } 100%{ -webkit-transform:rotateX(0deg); } } @-webkit-keyframes fallingBanner{ 0%{ top:-300px; -webkit-animation-timing-function:ease-in; } 100%{ top:100px; } } </style> </head> <body> <div class="falling-banner"> <span class="string"></span> <div class="perspective-container"> <div class="vibrating-box"> </div> </div> </div> </body> </html>
Run
×
Share