<!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-col
代码问题分析 在你提供的代码中，`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. 在移除元素时，要确保在动画完成后再进行移除操作，否则可能会导致动画效果不完整。 [2025-06-03 09:38:40 | AI写代码神器 | 1359点数解答]
- <!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-col（1359点数解答 | 2025-06-03 09:38:40）69
- <!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: #f0f0f0; } canvas { display: block; } </style> </head> <body> <canvas id="animationCanvas"></canvas> <script> const canvas = document.getElementById('animationCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.heig（160点数解答 | 2025-02-28 16:18:33）152
- <!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, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #door-container { position: relative; height: 100vh; width: 100vw; overflow: hidden; } .door { position: absolute; top: 0; height: 100%; width: 50%; background: #333; transition: transform 5s ease-in-out; } .left-door { left: 0; tran（495点数解答 | 2024-11-23 16:17:46）178
- <!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, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #door-container { position: relative; height: 100vh; width: 100vw; overflow: hidden; } .door { position: absolute; top: 0; height: 100%; width: 50%; background: #333; transition: transform 5s ease-in-out; } .left-door { left: 0; tran（567点数解答 | 2024-11-23 16:22:50）160
- <!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, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #door-container { position: relative; height: 100vh; width: 100vw; overflow: hidden; } .door { position: absolute; top: 0; height: 100%; width: 50%; background: #333; transition: transform 5s ease-in-out; } .left-door { left: 0; tran（500点数解答 | 2024-11-23 16:24:25）184
- <!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 { margin: 0; padding: 0; overflow: hidden; background-color: #000; cursor: pointer; height: 100vh; width: 100vw; } canvas { display: block; } .instructions { position: （170点数解答 | 2025-05-01 14:48:57）90
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Earth</title> <style> body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; } canvas { display: block; } </style> </head> <bod（173点数解答 | 2025-01-22 21:25:27）161
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>一袋米要扛几楼</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body{margin:0;background:#123;}.base{min-height:100%;display:flex;justify-content:center;align-items:center;background:#123;}.eyeleft{overflow:hidden;width:300px;height:300px;marg（530点数解答 | 2025-07-14 23:05:45）85
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>写轮眼动画</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script> // 获取canvas元素和它的2D上下文 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); （883点数解答 | 2025-06-25 22:50:24）80
- html <!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 { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: 000; cursor: pointer; } .firework { position: absolute; width: 5px; （275点数解答 | 2025-05-10 07:26:53）93
- <!DOCTYPE html> <html> <head> <title>功夫忍者挑战</title> <style> body { margin: 0; overflow: hidden; } #gameCanvas { background: #2c3e50; } #score { position: fixed; top: 10px; left: 10px; color: white; } </style> </head> <body> <div id="score">得分: 0</div> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height（171点数解答 | 2025-03-08 21:40:11）125
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; } #game-container { position: relative; } #canvas { border: 2px solid #333; background: #fff; } #controls { position: absolute; bottom: 20px; width: 100%; disp（2000点数解答 | 2025-07-10 15:51:52）97