Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Wave
<div class="container"> <div class="ball ball1"></div> <div class="ball ball2"></div> <div class="ball ball3"></div> <div class="ball ball4"></div> <div class="ball ball5"></div> <div class="ball ball6"></div> <div class="ball ball7"></div> <div class="ball ball8"></div> <div class="ball ball9"></div> <div class="ball ball10"></div> <div class="ball ball11"></div> <div class="ball ball12"></div> <div class="ball ball13"></div> <div class="ball ball14"></div> <div class="ball ball15"></div> </div>
body{ background: #1d1e22; } .container{ width: 20px; position: relative; margin: auto; top: 20vh; } .ball{ --radius: calc(200px + var(--n)*10px); top: var(--radius); transform-origin: 0 calc(-1 * var(--radius)); position: absolute; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #000; background: #ffad4a; animation: oscillation calc(60s / (50 + var(--n))) ease-in-out infinite alternate; } .ball::before{ content: ""; position: absolute; top: calc(-1*var(--radius)); left: 50%; transform: translate(-50%); width: 1px; height: var(--radius); background: black; } .ball1{--n:1}.ball2{--n:2}.ball3{--n:3}.ball4{--n:4}.ball5{--n:5}.ball6{--n:6}.ball7{--n:7}.ball8{--n:8}.ball9{--n:9}.ball10{--n:10}.ball11{--n:11}.ball12{--n:12}.ball13{--n:13}.ball14{--n:14}.ball15{--n:15} @keyframes oscillation { from { transform: rotate(20deg); } to{ transform: rotate(-20deg); } }
18
Pendulum Wave
By:
rald_dev
