Moving Ball
Home
Snippets
Moving Ball
HTML
CSS
JS
<div class="container"> <div class="inner"> <div class="ball"></div> </div> </div>
* { box-sizing: border-box; } body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; color: #222; background-color: #ececec; } .container { width: 300px; aspect-ratio: 1; padding: 24px; border-radius: calc(24px + 24px); background-image: linear-gradient(45deg, #d3e9e8, #b1c4e7); box-shadow: 2px 2px 18px #000 3; } .inner { width: 100%; height: 100%; padding: 8px; border: 1px dashed #fff; border-radius: 24px; background-color: #fff 3; container-type: size; } .ball { width: 36px; aspect-ratio: 1; background-image: radial-gradient(circle at 75% 75%, #c1cae4, #0a2fd3); border-radius: 50%; animation: moving 3s linear infinite alternate; } @keyframes moving { 25% { translate: calc(100cqi - 100%) calc(25cqb - 100%); } 50% { translate: 0 calc(50cqb - 100%); } 75% { translate: calc(100cqi - 100%) calc(75cqb - 100%); } 100% { translate: 0 calc(100cqb - 100%); } }
//javascript
Ad #1
Ad #2
Scroll to Top