CSS Ping Pong

HTML
<div class="container"> <div class="paddle"> <div class="solid"> <div class="surface"></div> <div class="hold"> <div class="top"></div> <div class="transition"></div> <div class="handle"></div> </div> </div> <div class="wiggly"> <div class="string"></div> <div class="ball"></div> </div> </div> </div>
LESS
body { margin: 0; padding: 0; background: #4C82F9; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .paddle { transform-origin: 50% 100%; animation: 0.5s tilt2 ease-in infinite; } .solid { display: flex; flex-direction: column; align-items: center; } .surface { width: 100px; height: 110px; background: linear-gradient(45deg, #ec1e40 0%, #ff5476 100%); border-radius: 50px 50px 36px 36px; box-shadow: -3px 0 #000, -6px 0 #ec1e40; } .hold { position: relative; .top { position: relative; top: -10px; left: -6px; width: 40px; height: 20px; background: linear-gradient(315deg, transparent 5px, transparent 0) bottom right, linear-gradient(45deg, transparent 5px, transparent 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 10px, #E57729 5px), radial-gradient(circle at 0 100%, rgba(204,0,0,0) 10px, #E57729 5px); &:before { display: block; content: ''; position: relative; left: 3px; width: 40px; height: 20px; background: linear-gradient(315deg, transparent 5px, transparent 0) bottom right, linear-gradient(45deg, transparent 5px, transparent 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 10px, #FDB581 5px), radial-gradient(circle at 0 100%, rgba(204,0,0,0) 10px, #FDB581 5px); } &:after { display: block; content: ''; position: relative; top: -20px; left: 6px; width: 40px; height: 20px; background: linear-gradient(315deg, transparent 5px, transparent 0) bottom right, linear-gradient(45deg, transparent 5px, transparent 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 10px, #fe9f3d 5px), radial-gradient(circle at 0 100%, rgba(204,0,0,0) 10px, #fe9f3d 5px); } } .transition { position: absolute; top: 0px; left: 10px; width: 20px; height: 15px; background: linear-gradient(to top, #fd7724 0%, #fe9f3d 60%, #fe9f3d 100%); border-radius: 100%; z-index: 10; } .handle { position: relative; top: -10px; left: 4px; width: 20px; height: 55px; background: #E57729; border-radius: 0 0 5px 5px; &:before { display: block; content: ''; position: relative; left: 3px; width: 20px; height: 55px; background: #FDB581; border-radius: 0 0 5px 5px; } &:after { display: block; content: ''; position: relative; top: -55px; left: 6px; width: 20px; height: 55px; background: linear-gradient(to right, #fd7724 0%, #fe9f3d 30%, #fdb581 100%); border-radius: 0 0 5px 5px; } } } .wiggly { position: absolute; top: 60px; transform-origin: 50px 0; animation: 3s tilt infinite; .string { position: absolute; left: 50px; width: 150px; height: 1px; background: linear-gradient(to bottom, #fff 0%, #bbb 100%); animation: 0.5s contract ease-in infinite; } .ball { position: absolute; top: -15px; left: 170px; width: 30px; height: 30px; background: radial-gradient(ellipse at top left, #fff 30%, #bbb 100%); border-radius: 100%; animation: 0.5s bounce ease-in infinite; } } @keyframes bounce { 0% { left: 170px; width: 30px; } 10% { width: 40px; } 50% { left: 40px; width: 30px; } 90% { width: 40px; } 100% { left: 170px; width: 30px; } } @keyframes contract { 0% { width: 150px; } 50% { width: 0px; } 100% { width: 150px; } } @keyframes tilt { 0% { transform: rotate(0deg); } 20% { transform: rotate(30deg); } 60% { transform: rotate(0deg); } 80% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } } @keyframes tilt2 { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }
JAVASCRIPT
Expand for more options Login