Animated cup with cappuccino code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated cup with cappuccino</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cup"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="plate"></div> </body> </html>
2.style.css:
body { background: rgb(159,224,255); margin: 0; padding: 0; } .cup { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 150px; height: 160px; background: rgb(255,255,255); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .cup::before { content: ''; position: absolute; top: 0; left: 0; height: 30px; width: 100%; border-radius: 50%; background: rgb(241,190,114); border: 7px solid rgb(255,255,255); box-sizing: border-box; transform: translateY(-50%); box-shadow: inset 0 0 15px rgb(0,0,0,0.5); } .cup::after { content: ''; position: absolute; top: 48%; right: -50px; height: 90px; width: 80px; border-radius: 50%; background: transparent; border: 12px solid rgb(255,255,255); box-sizing: border-box; transform: translateY(-50%); } .plate { width: 250px; height: 30px; border-bottom-left-radius: 40%; border-bottom-right-radius: 40%; background: rgb(255,255,255); position: absolute; top: 400px; transform: translateX(210px); } ul { margin: 0; padding: 0; position: absolute; top: -50px; transform: translateX(10%); width: 100%; } ul li { list-style: none; width: 2px; height: 40px; background: rgb(255,255,255); float: left; margin: 10px; animation: animate 2s infinite linear; } @keyframes animate { 0% { transform: translateY(0); opacity: 1; filter: blur(3px); } 100% { transform: translateY(-80px); opacity: 0; filter: blur(5px); } } ul li:nth-child(1) { animation-delay: 4s; } ul li:nth-child(2) { animation-delay: 2s; } ul li:nth-child(3) { animation-delay: 5s; } ul li:nth-child(4) { animation-delay: 3s; } ul li:nth-child(5) { animation-delay: 1s; }
