#212121
1.ball { 2 position: relative; 3 bottom: 50px; 4 left: calc(100% - 20px); 5 width: 50px; 6 height: 50px; 7 background: #fff; 8 border-radius: 50%; 9 animation: ball-move8234 3s ease-in-out 1s infinite alternate; 10} 11 12.ball::after { 13 position: absolute; 14 content: ''; 15 top: 25px; 16 right: 5px; 17 width: 5px; 18 height: 5px; 19 background: #000; 20 border-radius: 50%; 21} 22 23.bar { 24 width: 200px; 25 height: 12.5px; 26 background: #FFDAAF; 27 border-radius: 30px; 28 transform: rotate(-15deg); 29 animation: up-down6123 3s ease-in-out 1s infinite alternate; 30} 31 32@keyframes up-down6123 { 33 from { 34 transform: rotate(-15deg); 35 } 36 37 to { 38 transform: rotate(15deg); 39 } 40} 41 42@keyframes ball-move8234 { 43 from { 44 left: calc(100% - 40px); 45 transform: rotate(360deg); 46 } 47 48 to { 49 left: calc(0% - 20px); 50 transform: rotate(0deg); 51 } 52}
12K views
12K views
Comments
3awammar 31. July at 13:56
31. July at 13:56
amazing website
awammar 31. July at 13:56
31. July at 13:56
really i want to say thanks
awammar 31. July at 13:56
31. July at 13:56
wow
MIT License