<!DOCTYPE html> <html> <head> <style> .nail{ width:15px; height:15px; border-radius:50%; background-color:black; box-shadow:2px 2px 2px 0px rgb(200,200,200); position:absolute; top:100px; left:217px; z-index:1000; } .falling-banner{ color:white; position:absolute; top:100px; left:100px; width:250px; height:150px; animation:fallingBanner 1s 1; -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 rgba(221,187,127,1); 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:rgba(221,187,127,1); color:white; border-radius:10px; transform:rotateX(0deg); transform-origin:top; animation:vibratingBox 2s 1; animation-delay:1s; box-shadow:5px 5px 5px 0px rgba(210,210,210,0.5); } .message-box{ width:95%; height:92%; position:absolute; left:2%; top:3%; border:1px dashed yellow; border-radius:10px; background-color:rgba(221,187,127,1); color:white; font-family:'Dancing Script', cursive; } @-webkit-keyframes fallingBanner{ /*-webkit- is for safari */ 0%{ top:-300px; animation-timing-function:ease-in; } 100%{ top:100px; } } @-webkit-keyframes vibratingBox{ /* -webkit- for safari */ 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); } } </style> </head> <body> <div class="nail"></div> <div class="falling-banner"> <div class="string"></div> <div class="perspective-container"> <div class="vibrating-box"> <div class="message-box"> <p style="text-align:center;">This demo should be used to present new offers related to your product.</p> </div> </div> </div> </div> </body> </html>
Run
×
Share