SVG长按左键挥手动画特效

原创 已于 2025-06-27 11:16:23 修改 · 686 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #特效

于 2025-06-19 13:25:23 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG长按左键挥手动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        
        .container {
            position: relative;
            width: 300px;
            height: 300px;
        }
        
        #hand {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .instructions {
            margin-top: 30px;
            text-align: center;
            color: #333;
        }
        
        .link {
            position: absolute;
            bottom: 20px;
            color: #666;
            text-align: center;
            width: 100%;
        }
        
        .link a {
            color: #ff6600;
            text-decoration: none;
        }
        
        .link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <svg id="hand" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <!-- 手臂 -->
            <path id="arm" fill="#ffcc99" d="M100,50 L100,150 C100,170 120,180 140,170 L150,160 C160,150 160,140 150,130 L100,100" />
            
            <!-- 手掌 -->
            <circle id="palm" cx="100" cy="100" r="30" fill="#ffcc99" />
            
            <!-- 手指 -->
            <path id="finger1" fill="#ffcc99" d="M70,90 L80,70 C90,60 100,60 110,70 L120,90" />
            <path id="finger2" fill="#ffcc99" d="M80,80 L90,60 C100,50 110,50 120,60 L130,80" />
            <path id="finger3" fill="#ffcc99" d="M90,70 L100,50 C110,40 120,40 130,50 L140,70" />
            <path id="finger4" fill="#ffcc99" d="M100,60 L110,40 C120,30 130,30 140,40 L150,60" />
            
            <!-- 初始状态隐藏的挥手动画路径 -->
            <path id="wavePath" fill="none" stroke="none" d="M100,100 Q80,80 100,60 Q120,40 140,60 Q160,80 140,100" />
        </svg>
    </div>
    
    <div class="instructions">
        长按鼠标左键查看挥手动画
    </div>
    

    <script>
        const hand = document.getElementById('hand');
        let isMouseDown = false;
        let animationInterval;
        
        // 鼠标按下事件
        hand.addEventListener('mousedown', (e) => {
            if (e.button === 0) { // 左键
                isMouseDown = true;
                startWaveAnimation();
            }
        });
        
        // 鼠标释放事件
        document.addEventListener('mouseup', () => {
            if (isMouseDown) {
                isMouseDown = false;
                stopWaveAnimation();
            }
        });
        
        // 开始挥手动画
        function startWaveAnimation() {
            let waveCount = 0;
            const maxWaves = 5;
            
            animationInterval = setInterval(() => {
                if (waveCount >= maxWaves * 2) {
                    waveCount = 0;
                }
                
                const waveOffset = waveCount % 2 === 0 ? 10 : -10;
                animateHand(waveOffset);
                waveCount++;
            }, 200);
        }
        
        // 停止挥手动画
        function stopWaveAnimation() {
            clearInterval(animationInterval);
            resetHandPosition();
        }
        
        // 动画手部位置
        function animateHand(offset) {
            const palm = document.getElementById('palm');
            const arm = document.getElementById('arm');
            const fingers = [
                document.getElementById('finger1'),
                document.getElementById('finger2'),
                document.getElementById('finger3'),
                document.getElementById('finger4')
            ];
            
            // 移动手掌
            palm.setAttribute('cx', 100 + offset);
            
            // 移动手臂
            arm.setAttribute('d', `M100,50 L100,150 C100,170 120,180 140,170 L150,160 C160,150 160,140 ${150 + offset},130 L${100 + offset},100`);
            
            // 移动手指
            fingers.forEach((finger, index) => {
                const yOffset = 30 - (index * 10);
                finger.setAttribute('d', 
                    `M${70 + (index * 10) + offset},${90 - (index * 10)} 
                     L${80 + (index * 10) + offset},${70 - (index * 10)} 
                     C${90 + (index * 10) + offset},${60 - (index * 10)} 
                      ${100 + (index * 10) + offset},${50 - (index * 10)} 
                      ${110 + (index * 10) + offset},${60 - (index * 10)} 
                     L${120 + (index * 10) + offset},${80 - (index * 10)}`);
            });
        }
        
        // 重置手部位置
        function resetHandPosition() {
            const palm = document.getElementById('palm');
            const arm = document.getElementById('arm');
            const fingers = [
                document.getElementById('finger1'),
                document.getElementById('finger2'),
                document.getElementById('finger3'),
                document.getElementById('finger4')
            ];
            
            // 重置手掌
            palm.setAttribute('cx', 100);
            
            // 重置手臂
            arm.setAttribute('d', 'M100,50 L100,150 C100,170 120,180 140,170 L150,160 C160,150 160,140 150,130 L100,100');
            
            // 重置手指
            fingers[0].setAttribute('d', 'M70,90 L80,70 C90,60 100,60 110,70 L120,90');
            fingers[1].setAttribute('d', 'M80,80 L90,60 C100,50 110,50 120,60 L130,80');
            fingers[2].setAttribute('d', 'M90,70 L100,50 C110,40 120,40 130,50 L140,70');
            fingers[3].setAttribute('d', 'M100,60 L110,40 C120,30 130,30 140,40 L150,60');
        }
    </script>
</body>
</html>

ziblog
关注
HTML5 SVG长按左键挥手动画特效特效代码
03-20
本项目涉及的是一个利用HTML5和SVG实现的长按左键挥手动画特效，适用于增强网页的用户体验和互动性。 HTML5是第五代超文本标记语言，它对之前的HTML版本进行了大量改进和扩展，提供了更好的媒体支持、离线存储、...
HTML5 SVG长按左键挥手动画特效.zip
07-11
代码片段：  armDown = (() => {  arm_right1.style.display = "block";  arm_right2.style.display = "none";  setTimeout(toggleRightArm, timer)  })
分享996个实用的JavaScript特效你要的全在这里
weixin_47730343的博客
05-31 3135
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
分享112个JS特效动画效果，总有一款适合您
zdh13370188237的博客
02-05 1046
js
HTML5 SVG实现长按左键挥手动画特效教程
2. **HTML5 SVG长按左键挥手动画特效**： - 此标签是对整个动画效果的描述，具体说明了该特效涉及的技术栈（HTML5和SVG），交互方式（长按鼠标左键），以及动画的类型（挥手）。 - 标签也暗示了这个效果是通过长按...
HTML5 SVG长按手势动画特效实现教程
综上所述，HTML5 SVG长按左键挥手动画特效是利用HTML5和SVG技术，通过编写JavaScript代码实现的一种交互式动画效果。该特效不仅展示了SVG在动画领域的强大能力，还体现了JavaScript在控制SVG图形和实现复杂动画逻辑...
React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用
m0_61998604的博客
12-04 1142
本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
HIT_Weston的博客
12-04 1374
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
anscos的博客
12-05 1208
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
前端项目 npm 镜像使用的顺序，和优先级顺序
有一棵树的博客
12-05 652
package.json 文件中的 /URL/本地格式路径Git URLHTTP(s) URL / 压缩包 URLfile: 本地路径linkdirect source 不受 lockfile 和 .npmrc 影响，这些来源强绑定，不走 registry，也不走镜像，没有 fallbacklock 文件中 resolved 的镜像地址若 lockfile 记录了 tarball URL，则强制使用仅适用于 registry 包（不是 direct source）
多层环形图，自定义tooltip
好记性，不如烂键盘。
12-05 603
多层环形图，自定义tooltip。
《Java Web 期末项目分享：MVC+DBUtils+c3p0 玩转数据库增删改查》——第一弹
zzy_wqe的博客
12-04 993
编写登录表单，提交到 LoginServlet；可读取 Cookie 自动填充用户名。启动 Tomcat，测试登录、增删改查是否正常（检查数据库数据变化、页面显示是否正确）；：编写表单，提交到对应 Servlet，实现数据录入 / 回显。确保未登录时直接访问 Servlet 会跳转到登录页。添加空值判断、数据库操作异常捕获，给出友好提示；
openEuler + Nginx 高性能 Web 服务深度评测
笃行其道的博客
12-03 1064
本文介绍了在openEuler操作系统上部署Nginx集群的性能测试方案。通过优化内核参数、资源限制和系统调优，在32核64GB环境的华为云实例上进行八大维度的压测：静态文件服务测试显示小文件QPS达23万+，大文件传输速率13.97GB/s；反向代理性能测试QPS23万；HTTPS测试降幅仅16%；长连接测试QPS8.6万；压缩测试显示99%压缩率；极限测试支撑10万+并发。测试结果表明，openEuler的网络/I/O优化与Nginx事件驱动架构完美结合，CPU利用率96%且内存占用<10%，延迟
Vue前端知识
最新发布
sky学linux的博客
12-08 120
Vue前端知识
python+django/flask+vue基于web的产品管理系统
Q_Q511008285的博客
12-04 693
在信息化和全球化加速发展的背景下，企业面临着产品种类不断增加、市场需求变化加快、供应链协作日益复杂的挑战，传统依赖Excel表格、纸质文档和孤立系统的产品管理方式已难以满足高效、精准、协同的管理需求，常常导致信息更新不及时、数据不一致、审批流程冗长、库存与销售脱节等问题，制约了企业的市场响应速度与决策质量。
Sciter之子线程更新UI（八）
凌康的博客
12-06 337
本文介绍了如何在Sciter框架中实现子线程更新UI的方法。Sciter是一个小众但高性能的嵌入式UI引擎，适合桌面应用开发。文章展示了通过sciter::thread在子线程中更新UI的两种方式：1) 通过post_event发送事件通知前端更新；2) 直接调用前端JavaScript函数。这两种方法都适用于耗时任务场景，如文件下载完成后更新界面。文中提供了完整的C++和前端JavaScript代码示例，包括线程创建、事件处理和函数调用等关键环节。开发环境为Windows 10 + CLion2024
Vite 前端项目 - CSS变量智能提示
qq_41798568的博客
12-08 382
这是一个基于Vite的现代化前端项目，专注于提供CSS变量智能提示功能。项目集成了完整的CSS变量支持，包括智能补全、详细描述和颜色预览，大幅提升开发效率。通过配置VSCode设置和安装CSS Var Complete插件，开发者可以快速获取变量提示。项目支持多主题切换，提供开箱即用的开发体验，包含详细的配置说明和使用指南，适合需要高效CSS开发的前端项目。
LLM交互工具汇总：Open WebUI、ChatBot-UI、浏览器插件、Studio
lonelymanontheway的博客
12-05 776
Open WebUI、实战、mcpo、ChatBot-UI、实战、轻量级、浏览器插件、Page Assist、ollama-ui、Studio类工具、Cherry Studio、LM Studio、Msty Studio、参考、
阿里云oss，通过html直接上传
quweiie的专栏
12-03 631
本文介绍了基于ThinkPHP8.1框架实现阿里云OSS V4签名直传文件的方法。前端通过表单提交文件，使用fetch API获取后端生成的签名信息后直接上传至OSS。后端主要实现两个功能：1) 通过阿里云STS服务获取临时凭证，并使用HMAC-SHA256算法生成OSS V4签名；2) 处理OSS回调验证。系统采用前后端分离架构，前端负责文件选择和直传，后端负责签名生成和安全验证，实现了安全高效的文件上传方案，适用于CentOS Stream9/PHP8.3环境。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值