修复代码错误，实现线条与图形消失动画的完整攻略！

代码问题分析在你提供的代码中，`createRandomLine` 函数里的 `line.style.top = `${Math.random() * h}` 存在错误，这里的 `h` 并未定义，应该使用之前定义的 `height` 变量。代码中创建的线条和图形没有实现消失动画的逻辑。修正后的代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线条和图形消失动画</title> <style> body { margin: 0; overflow: hidden; background-color: white; } #canvas { display: block; width: 100vw; height: 100vh; } .shape { position: absolute; background-color: black; opacity: 1; transition: opacity 0.3s ease; } .line { position: absolute; background-color: black; transform-origin: 0 0; opacity: 1; transition: opacity 0.3s ease; } </style> </head> <body> <div id="canvas"></div> <script> const canvas = document.getElementById('canvas'); const width = window.innerWidth; const height = window.innerHeight; // 创建随机线条和图形 function createShapes() { const shapesCount = 30 + Math.floor(Math.random() * 20); for (let i = 0; i < shapesCount; i++) { createRandomShape(); } const linesCount = 20 + Math.floor(Math.random() * 15); for (let i = 0; i < linesCount; i++) { createRandomLine(); } // 一段时间后让所有元素消失 setTimeout(() => { const allElements = canvas.querySelectorAll('.shape, .line'); allElements.forEach((element) => { element.style.opacity = 0; // 消失后移除元素 setTimeout(() => { element.remove(); }, 300); }); }, 3000); } function createRandomShape() { const shape = document.createElement('div'); shape.className = 'shape'; // 随机选择形状类型 const shapeType = Math.random(); if (shapeType < 0.3) { // 三角形 shape.style.width = '0'; shape.style.height = '0'; shape.style.borderLeft = `${10 + Math.random() * 50}px solid transparent`; shape.style.borderRight = `${10 + Math.random() * 50}px solid transparent`; shape.style.borderBottom = `${20 + Math.random() * 80}px solid black`; shape.style.backgroundColor = 'transparent'; } else if (shapeType < 0.6) { // 不规则多边形 (使用clip-path) const sides = 3 + Math.floor(Math.random() * 4); // 3-6边形 const points = []; for (let j = 0; j < sides; j++) { const angle = (j / sides) * 2 * Math.PI; const radius = 10 + Math.random() * 40; points.push(`${50 + radius * Math.cos(angle)}% ${50 + radius * Math.sin(angle)}%`); } shape.style.clipPath = `polygon(${points.join(', ')})`; shape.style.width = `${20 + Math.random() * 100}px`; shape.style.height = `${20 + Math.random() * 100}px`; } else { // 矩形或菱形 shape.style.width = `${10 + Math.random() * 120}px`; shape.style.height = `${10 + Math.random() * 120}px`; if (Math.random() > 0.5) { shape.style.transform = 'rotate(45deg)'; } } shape.style.left = `${Math.random() * width}px`; shape.style.top = `${Math.random() * height}px`; shape.style.transform += ` rotate(${Math.random() * 360}deg)`; canvas.appendChild(shape); } function createRandomLine() { const line = document.createElement('div'); line.className = 'line'; const length = 50 + Math.random() * 200; const thickness = 1 + Math.random() * 3; const angle = Math.random() * 360; line.style.width = `${length}px`; line.style.height = `${thickness}px`; line.style.left = `${Math.random() * width}px`; line.style.top = `${Math.random() * height}px`; line.style.transform = `rotate(${angle}deg)`; canvas.appendChild(line); } // 调用创建函数 createShapes(); </script> </body> </html> ``` 额外需要注意的逻辑点 1. 在修改元素样式时，要确保使用正确的变量名，避免出现未定义变量的错误，如这里之前的 `h` 问题。 2. 当使用 `setTimeout` 实现动画效果时，要注意设置合适的时间间隔，避免动画过快或过慢，影响用户体验。 3. 在移除元素时，要确保在动画完成后再进行移除操作，否则可能会导致动画效果不完整。 ######[AI写代码神器 | 1359点数解答 | 2025-06-03 09:38:40]

服务商

更多选项

快捷项

自定义