Mountain Landscape - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mountain Landscape</title> <style> body, html { margin: 0; padding: 0; height: 100%; background: linear-gradient(to bottom, #99ccff, #66ccff); } .background { position: absolute; width: 100%; height: 100%; overflow: hidden; } .mountain { position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, #333, #999); clip-path: polygon(0 100%, 50% 0, 100% 100%); } .mountain2 { position: absolute; bottom: 0; width: 100%; height: 40%; background: linear-gradient(to top, #666, #ccc); clip-path: polygon(0 100%, 60% 10%, 100% 100%); } .cloud { position: absolute; top: 10%; width: 200px; height: 100px; background: white; border-radius: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); animation: cloudMovement 30s linear infinite; } @keyframes cloudMovement { 0% { left: -200px; } 100% { left: 100%; } } .cloud::before, .cloud::after { content: ''; position: absolute; background: white; width: 100px; height: 80px; border-radius: 50%; } .cloud::before { top: -40px; left: 30px; } .cloud::after { top: -30px; right: 30px; } </style> </head> <body> <div class="background"> <div class="mountain"></div> <div class="mountain2"></div> <div class="cloud"></div> <div class="cloud" style="top: 20%; left: 60%;"></div> </div> </body> </html>