CSS Tennis Ball

HTML
<div class="container"> <div class="ball"></div> <div class="shadow"></div> </div>
CSS
body { margin: 0; padding: 0; background: #262626; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ball { position: absolute; width: 150px; height: 150px; background: #c9f364; border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden; animation: ball 1.5s linear infinite; } .ball:before { content: ''; position: absolute; width: 100%; height: 100%; border: 5px solid #fff; border-radius: 50%; box-sizing: border-box; background: transparent; left: -65%; filter: blur(1px); } .ball:after { content: ''; position: absolute; width: 100%; height: 100%; border: 5px solid #fff; border-radius: 50%; box-sizing: border-box; background: transparent; right: -65%; filter: blur(1px); } @keyframes ball { 0% { transform: translate(-50%, -50%) translateY(-200px) rotate(0deg); } 50% { transform: translate(-50%, -50%) translateY(0px) rotate(180deg); } 100% { transform: translate(-50%, -50%) translateY(-200px) rotate(360deg); } } .shadow { position: absolute; width: 150px; height: 50px; background: rgba(0,0,0,0.2); border-radius: 50%; transform: translate(-50%, 100%); overflow: hidden; filter: blur(2px); z-index: -1; animation: shadow 1.5s linear infinite; } @keyframes shadow { 0% { transform: translate(-50%, 100%) scale(1); } 50% { transform: translate(-50%, 100%) scale(0.5); } 100% { transform: translate(-50%, 100%) scale(1); } }
JAVASCRIPT
Expand for more options Login