Loader by Hashir-Ahmed123
#e8e8e8
1@keyframes drop { 2 0% { 3 transform: translateY(0px); 4 } 5 50% { 6 transform: translateY(80px); 7 } 8 100% { 9 transform: translateY(0px); 10 } 11} 12 13.lava-lamp { 14 position: relative; 15 width: 50px; 16 height: 100px; 17 background: #000; 18 border-radius: 25px; 19 overflow: hidden; 20} 21 22.bubble { 23 position: absolute; 24 top: 0; 25 width: 20px; 26 height: 20px; 27 background: linear-gradient(to bottom, #e64980, #ff8787); 28 border-radius: 50%; 29 left: 15px; 30 animation: drop 5s ease-in-out infinite; 31} 32.bubble1 { 33 position: absolute; 34 top: 0; 35 width: 20px; 36 height: 20px; 37 background: linear-gradient(to bottom, #82c91e, #3bc9db); 38 border-radius: 50%; 39 left: 1px; 40 animation: drop 3s ease-in-out infinite; 41} 42.bubble2 { 43 position: absolute; 44 top: 0; 45 width: 20px; 46 height: 20px; 47 background: linear-gradient(to bottom, #7950f2, #f783ac); 48 border-radius: 50%; 49 left: 30px; 50 animation: drop 4s ease-in-out infinite; 51} 52.bubble3 { 53 position: absolute; 54 top: 0; 55 width: 20px; 56 height: 20px; 57 background: linear-gradient(to bottom, #4481eb, #04befe); 58 border-radius: 50%; 59 left: 20px; 60 animation: drop 6s ease-in-out infinite; 61} 62
112 views
112 views
MIT License