666 views
CSSAdd prefixes
1.mover { 2 background: rgba(248, 25, 25, 0.979); 3 height: 10px; 4 width: 80px; 5 border-radius: 10px; 6 position: relative; 7 animation: mover5 2s ease-in-out infinite; 8} 9 10.mover::before, 11.mover::after { 12 content: ''; 13 position: absolute; 14 height: 10px; 15 border-radius: 10px; 16 left: 20px; 17 animation: mover5 2s ease-in-out infinite; 18} 19 20.mover::before { 21 background: rgb(201, 1, 1); 22 top: 20px; 23 width: 50px; 24} 25 26.mover::after { 27 background: rgb(255, 116, 106); 28 top: -20px; 29 width: 60px; 30} 31 32@keyframes mover5 { 33 0% { 34 transform: translateX(30px) scale(1); 35 } 36 37 50% { 38 transform: translateX(-30px) scale(1.1); 39 } 40 41 100% { 42 transform: translateX(30px) scale(1); 43 } 44}
HTML
1<div class="mover"></div>