阅读以下代码并解释功能 附加：替换花朵的形状和飘落的方向 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飘落的花朵</title> <style> body { overflow: hidden; background-color: #f0f8ff; height: 100vh; margin: 0; position: relative; } .flower { position: absolute; width: 20px; height: 20px; background-color: #FF69B4; /* 花朵颜色 */ border-radius: 50%; /* 圆形 */ animation: fall linear forwards; } @keyframes fall { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } </style> </head> <body> <script> document.body.addEventListener('click', function(event) { const flower = document.createElement('div'); flower.className = 'flower'; flower.style.left = `${event.clientX - 10}px`; // 调整位置以居中 flower.style.top = `${event.clientY - 10}px`; // 调整位置以居中 flower.style.animationDuration = `${Math.random() * 3 + 2}s`; document.body.appendChild(flower); // 动画结束后移除花朵 flower.addEventListener('animationend', () => { flower.remove(); }); }); </script> </body> </html>
标签：style,flower,花朵,练习,飘落,document,event From： https://www.cnblogs.com/fanlk/p/18436633