هل استطيع انشاء موقع يظهر في الخلفية فقاعات صابون بالاعتماد الكلي على الجافا سكربت للتحريك واخفاء الفقاعات بالضغط عليها ؟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seifenblasen</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <h3> Seifenblasen </h3> </div> <script src="script.js"></script> </body> </html> CSS CODE * { margin: 0; padding: 0; } div{ width: 100%; height: 100vh; overflow: hidden; background: black; display: flex; justify-content: center; align-items: center; position: relative; } div h3 { color: aliceblue; font-size: 8em; } div span { bottom: -50px; position: absolute; background: transparent; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 10px rgba(255,255,0,0.5); animation: animate 4s linear infinite; } JavaScript Code function blasen(){ const section = document.querySelector( 'section') const element = document.createElement('span') let size = Math.random() * 60; element.style.width = 25 +size + 'px'; element.style.height= 25 + size + 'px'; element.style.left = Math.random() * innerWidth + "px"; section.appendChild(element); setTimeout (() => { element.remove() }, 1000) } setInterval(blasen, 20)
التعليقات