HTML5游动的线条动画特效

已于 2025-06-27 11:05:21 修改
阅读量289 收藏 10
点赞数 4
CC 4.0 BY-SA版权
文章标签： html 线条
于 2025-06-20 15:39:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148793820

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5游动的线条动画特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #121212;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 100;
            color: white;
        }

        .credit {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            z-index: 100;
        }

        .credit a {
            color: #4CAF50;
            text-decoration: none;
            transition: color 0.3s;
        }

        .credit a:hover {
            color: #FFD700;
        }

        button {
            background: rgba(76, 175, 80, 0.7);
            color: white;
            border: none;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            background: rgba(76, 175, 80, 0.9);
        }

        label {
            display: block;
            margin-top: 10px;
            color: white;
        }

        input[type="range"] {
            width: 200px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <canvas id="lineCanvas"></canvas>
    
    <div class="controls">
        <button id="resetBtn">重置动画</button>
        <button id="changeColorBtn">改变颜色</button>
        
        <label for="lineCount">线条数量: <span id="lineCountValue">50</span></label>
        <input type="range" id="lineCount" min="10" max="100" value="50">
        
        <label for="speedControl">游动速度: <span id="speedValue">50</span></label>
        <input type="range" id="speedControl" min="10" max="100" value="50">
    </div>
    
    <div class="credit">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('lineCanvas');
            const ctx = canvas.getContext('2d');
            
            // 设置画布大小为窗口大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // 线条数组
            let lines = [];
            let lineCount = 50;
            let speed = 50;
            let colorHue = 200;
            let animationId;
            
            // 线条类
            class Line {
                constructor() {
                    this.reset();
                    this.history = [];
                    this.maxHistory = 20;
                }
                
                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.vx = Math.random() * 4 - 2;
                    this.vy = Math.random() * 4 - 2;
                    this.color = `hsl(${colorHue + Math.random() * 60}, 100%, 50%)`;
                    this.width = Math.random() * 2 + 1;
                    this.life = 100 + Math.random() * 100;
                    this.maxLife = this.life;
                }
                
                update() {
                    // 保存当前位置到历史记录
                    this.history.push({ x: this.x, y: this.y });
                    if (this.history.length > this.maxHistory) {
                        this.history.shift();
                    }
                    
                    // 移动
                    this.x += this.vx * (speed / 50);
                    this.y += this.vy * (speed / 50);
                    
                    // 随机改变方向
                    if (Math.random() < 0.02) {
                        this.vx += Math.random() * 0.4 - 0.2;
                        this.vy += Math.random() * 0.4 - 0.2;
                    }
                    
                    // 限制速度
                    const maxSpeed = 2 + speed / 50;
                    const speedVal = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                    if (speedVal > maxSpeed) {
                        this.vx = (this.vx / speedVal) * maxSpeed;
                        this.vy = (this.vy / speedVal) * maxSpeed;
                    }
                    
                    // 边界检查
                    if (this.x < 0 || this.x > canvas.width) {
                        this.vx *= -1;
                    }
                    if (this.y < 0 || this.y > canvas.height) {
                        this.vy *= -1;
                    }
                    
                    // 生命周期减少
                    this.life--;
                    
                    // 如果生命周期结束，重置线条
                    if (this.life <= 0) {
                        this.reset();
                    }
                }
                
                draw() {
                    if (this.history.length < 2) return;
                    
                    ctx.beginPath();
                    
                    // 绘制历史轨迹
                    for (let i = 1; i < this.history.length; i++) {
                        const alpha = i / this.history.length;
                        const prev = this.history[i - 1];
                        const curr = this.history[i];
                        
                        ctx.moveTo(prev.x, prev.y);
                        ctx.lineTo(curr.x, curr.y);
                        
                        // 线条颜色和透明度渐变
                        ctx.strokeStyle = this.color.replace(')', `, ${alpha})`).replace('hsl', 'hsla');
                        ctx.lineWidth = this.width * alpha;
                        ctx.stroke();
                    }
                    
                    // 绘制当前点
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                }
            }
            
            // 初始化线条
            function initLines() {
                lines = [];
                for (let i = 0; i < lineCount; i++) {
                    lines.push(new Line());
                }
            }
            
            // 动画循环
            function animate() {
                // 清除画布
                ctx.fillStyle = 'rgba(18, 18, 18, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制线条
                lines.forEach(line => {
                    line.update();
                    line.draw();
                });
                
                animationId = requestAnimationFrame(animate);
            }
            
            // 初始化并开始动画
            initLines();
            animate();
            
            // 窗口大小调整时重置画布
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                initLines();
            });
            
            // 控制按钮事件
            document.getElementById('resetBtn').addEventListener('click', function() {
                cancelAnimationFrame(animationId);
                initLines();
                animate();
            });
            
            document.getElementById('changeColorBtn').addEventListener('click', function() {
                colorHue = Math.random() * 360;
                lines.forEach(line => {
                    line.color = `hsl(${colorHue + Math.random() * 60}, 100%, 50%)`;
                });
            });
            
            document.getElementById('lineCount').addEventListener('input', function() {
                lineCount = parseInt(this.value);
                document.getElementById('lineCountValue').textContent = lineCount;
                initLines();
            });
            
            document.getElementById('speedControl').addEventListener('input', function() {
                speed = parseInt(this.value);
                document.getElementById('speedValue').textContent = speed;
            });
        });
    </script>
</body>
</html>

ziblog
关注
JS特效第115弹：HTML5-鼠标控制树镜动画特效
weixin_38343072的博客
01-29 252
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
html5动画在线制作工具,KoolShow(HTML5动画制作工具)
weixin_39840635的博客
06-03 516
KoolShow是一款动画制作软件，能够帮助用户制作Flash动画，用于为文本、图像、矢量图形、音频、视频、幻灯片和jQuery小部件添加动画效果，方便好用。基本简介使用KoolShow多媒体创作软件可以轻松实现Html5动画。它非常适合创建具有丰富交互式内容，导航按钮和幻灯片的网页。 KoolShow将易用性与丰富的动画效果相结合，可以轻松，低成本地为网站创建专业品质的动画。它允许您组合和操作文...
分享84个html5特效，总有一款适合您
zy0412326的专栏
02-15 2084
知识付费甚欢喜，为咱码农谋福利。jQuery+html5+CSS3手机端右侧弹出3D导航菜单特效。html5+three.js+css科幻地球仪3D旋转动画特效。TweenMax.js+H5 Canvas动态水彩画板涂色特效。mimic.css+h5动画库样式表制作各种酷炫文字动画特效。html5+css3图文内容全屏层叠移动鼠标切换显示代码。h5+css3仿迅雷会员活动页面全屏红包雨动画特效。jQuery+H5响应式手机端触屏滑动图片轮播插件。jQuery+css3+H5输入框焦点事件动画特效。
HTML5全屏代码雨动画特效实现源码解析
最新发布
weixin_29840475的博客
04-28 768
简介：本案例介绍了利用HTML5技术实现类似《黑客帝国》的全屏代码雨动画特效。通过Canvas元素进行绘制，CSS3进行样式和动画设计，JavaScript或jQuery实现交互逻辑，WebGL可能用于3D效果，以及响应式设计确保跨设备兼容性，本项目源码为开发者提供了深入了解HTML5、CSS3和JavaScript的机会，特别是在动态效果的创建和优化方面。
分享83个html5特效，总有一款适合您
weixin_47730343的博客
02-15 1328
知识付费甚欢喜，为咱码农谋福利。H5+jQuery带缩略图横向滚动banner大图切换代码。jQuery+H5自适应通栏宽屏banner幻灯片切换特效。jQuery+H5打字机动画效果插件typewriting。jQuery+H5按钮控制叠加图片旋转木马切换代码。H5+jQuery+CSS3分步向导手风琴切换代码。H5+jQuery响应式全屏背景图片导航菜单特效。动画过渡效果H5+jQuery打开模态窗口代码。jQuery+H5世界城市三级联动下拉选择代码。H5+jQuery旅游网站左侧分类导航菜单特效。
8款HTML5动画特效推荐源码
weixin_30572613的博客
05-13 1246
1、HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发3D的视觉效果，HTML5非常强大。 在线演示 源码下载 2、jQuery球状放大镜特效插 今天我们...
HTML5 Canvas线条向上游动背景动画特效
06-11
这个“HTML5 Canvas线条向上游动背景动画特效”是一个利用Canvas API创建的动态视觉效果，模拟了类似生物扭动身体向上的场景，为网页增添了生动性和趣味性。 在Canvas中，我们可以使用`<canvas>`元素来创建一个画布...
html5 canvas绘制随机游动线条动画特效
06-11
这款“html5 canvas绘制随机游动线条动画特效”利用了Canvas API来生成一个美观且引人注目的动画效果。接下来，我们将深入探讨这个特效背后的关键技术和实现方法。 首先，Canvas API是HTML5的一个重要组成部分，它...
HTML5游动的线条动画特效.zip.zip
07-11
在这个名为"HTML5游动的线条动画特效.zip"的压缩包中，包含的是一种利用HTML5的Canvas API来创建动态线条动画的技术。Canvas是HTML5提供的一种在网页上进行图形绘制的元素，它允许开发者通过JavaScript来绘制2D图形...
HTML5 Canvas线条向上游动背景动画特效.zip
09-26
这个"HTML5 Canvas线条向上游动背景动画特效"是一个利用Canvas API实现的动态背景效果，常见于网站设计中，用于提升网站的视觉吸引力。 在Canvas上绘制线条动画涉及到的主要知识点包括： 1. **Canvas API**: HTML5...
html5 canvas炫酷线条动画特效
06-11
html5 canvas炫酷线条动画特效是一款按下键盘的时候线条不断变化的html5线条传输能量科幻动画效果。
html5线条传输能量动画特效.zip
07-04
html5线条传输能量动画特效是一款按下键盘的时候线条不断变化动画特效。
HTML5流动网状线条动画特效
06-24
HTML5流动网状线条动画特效是一款three基于canvas绘制的3D液体网状，鼠标移动网状波浪酷炫动画特效。
HTML5实现的树叶飘落动画特效
DICA的SEOer专栏
03-25 1440
这段代码实现了一个简单的树叶飘落动画特效，每次循环会在画布上随机生成若干个叶子，并让它们从画布顶部开始向下飘落，直至飘出画布，再重新生成并开始下一轮循环。可以通过修改叶子数量、颜色、大小等参数，以及调整飘落速度、方向等参数，来实现不同的效果。
html5 canvas线条合成的爱心动画特效
weixin_52354260的博客
11-13 428
html5 canvas线条合成的爱心动画特效
html5彩色线条动画js特效
ICode联盟
08-25 296
html5彩色线条动画特效，适合当做网页背景，动态的js网页背景特效。
html ui动画效果图,20种炫酷的菜单线条动画特效UI设计效果_html/css_WEB-ITnose
weixin_29839415的博客
06-03 912
简要教程这是一款效果非常炫酷的菜单线条动画特效UI设计效果。这组菜单线条动画共有20种效果，各种效果在用户点击菜单项时，会有不同的线条动画出现。查看演示 下载插件浏览器兼容性使用方法HTML结构所有的菜单都具有相同的HTML结构： Prospero HomeWho we areWhat we offerOur newsContact usmenu__item--current cl...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值