Bouncing Ball using HTML & CSS.
Bouncing Ball using HTML & CSS. Example.html <html> <head><link rel="stylesheet" type="text/css" href="Style.css"></head> <body> <div class="center"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html> ======================================================================== Style.css body { margin: 0px; padding: 0px; } .center { top:10%; left: 10%; position: absolute; transform: translate(-50%,-50%); } .ball { width: 100px; border-top: 50px solid #000; border-bottom: 50px solid grey; border-radius: 50%; animation:bounce 1s infinite linear; } .shadow { position:absolute; top:100px; left:30px; width:50px; height:10px; background:#262726; border-radius: 50%; opacity:.8; animation:shadow 1s infin...
Comments
Post a Comment