<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG优惠转盘抽奖特效 - 站长素材</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.min.css">
<link rel='stylesheet' href='css/vYxKLOa.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="deal-wheel">
<ul class="spinner"></ul>
<figure class="cap">
<!-- Grim reaper SVG import -->
<select id="select-reaction" class="select">
<option value="resting">resting</option>
<option value="dancing">dancing</option>
<option value="laughing">laughing</option>
<option value="shocked">shocked</option>
</select>
<svg class="grim-reaper" data-reaction="resting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 582 653">
<defs>
<clipPath id="clip-path">
<circle class="cls-1" cx="295.6" cy="286.3" r="286.3" />
</clipPath>
<clipPath id="clip-path-2">
<path class="cls-1" d="M460 250c0 130-126 222-151 209-39-22-194-110-194-239S280 54 356 54c33 1 104 66 104 196z" />
</clipPath>
<clipPath id="clip-path-3">
<path class="cls-1" d="M122 426l-100 7s28 161 167 156c37-2 69-27 66-31s-28 13-71-13c-58-35-62-119-62-119z" />
</clipPath>
<style>
.cls-1,
.cls-17 {
fill: none
}
.cls-4 {
fill: #141414
}
.cls-5 {
fill: #111010
}
.cls-6 {
fill: #fff
}
.cls-7 {
fill: #5c382b
}
.cls-9 {
fill: #232323
}
.cls-15 {
fill: #2d221e
}
.cls-16 {
fill: #4f2610;
opacity: .6;
}
.cls-17 {
stroke: #9b8029;
stroke-miterlimit: 10;
stroke-width: 2.5px
}
.cls-18 {
fill: #a7a9ad
}
.cls-20 {
fill: #fafafa
}
</style>
</defs>
<circle id="BG" cx="295.6" cy="286.3" r="286.3" fill="#960b0a" />
<g data-animate="body">
<g id="ROBE">
<path class="cls-4" d="M489 371s-9-1-18 6c-15 12-35 38-35 38l46 58s0-8-4-22c-4-15-5-58 2-73 2-5 9-7 9-7z" />
<path class="cls-5" d="M483 487c-3 0-8-1-5-26 1-6-3-14-4-43-2-48 15-47 15-47s22-2 2 59c-11 32-5 57-8 57zM168 464c0 37-27 67-27 67s-34-30-49-64c-9-21-12-65-2-68 34-11 78 28 78 65z" />
</g>
<g id="LEFT_ARM">
<path class="cls-6" d="M473 440l-2-1a1 1 0 010-1l5-24 7-26a1 1 0 011-1l3 1a1 1 0 010 1 133 133 0 00-9 25 171 171 0 00-4 25l-1 1z" />
<path class="cls-6" d="M472 439l2 1a1 1 0 001-1l8-24 8-25a1 1 0 00-1-1l-3-1a1 1 0 00-1 1 132 132 0 01-5 26 170 170 0 01-9 23v1z" />
</g>
<g id="RIGHT_ARM">
<path class="cls-6" d="M177 521l5-3a2 2 0 000-2l-22-49-27-49a2 2 0 00-2-1l-6 3a2 2 0 000 2c11 15 22 31 30 47a362 362 0 0120 50l2 2z" />
<path class="cls-6" d="M180 518l-5 3a2 2 0 01-2-1l-28-46-26-49a2 2 0 010-3l6-3a2 2 0 012 1c6 18 13 35 23 51a363 363 0 0030 45v2z" />
</g>
<path id="SCYTHE-SNATH" class="cls-7" d="M22 433l493-45a6 6 0 016 3 6 6 0 01-5 8L27 455z" />
</g>
<g clip-path="url(#clip-path)" id="ROBE-BOTTOM-CLIP-PATH">
<g data-animate="body" id="ROBE-BOTTOM">
<path class="cls-4" d="M478 479c0-8 1-27-1-34-3-9 1-42 1-42l-36 4-6 8s-9 4-39-12c-20-10-70 52-70 52s74 93 105 90c6-1 21-1 16-10-4-7 11-37 30-44 4-1 5-3 6-6 0 0-6 4-6-6z" />
<path class="cls-9" d="M381 396c-18-20-50-3-85-11-25-5-36 4-41 21l-14 1c-20 3-39 30-49 48l-13-18-37 5s8 19 4 35c-8 32 8 73 8 73h30v10h18c-24 28 51 22 108 22 61 0 110 13 116-7 17-50-3-133-45-179z" />
</g>
</g>
<g data-animate="body">
<path id="HOOD" class="cls-5" d="M460 250c0 130-126 222-151 209-39-22-194-110-194-239S280 54 356 54c33 1 104 66 104 196z" />
<g id="TIE" clip-path="url(#clip-path-2)">
<path d="M352 431a120 120 0 00-17-38 19 19 0 009-18c-1-10-40-4-39 6 2 9 10 15 19 15-1 9-4 24-7 33-4 12-21 30-21 30l25 55a4 4 0 007 2l25-31s5-29-1-54z" fill="#da193f" />
<path d="M301 460s13 1 35-13a47 47 0 0016-16 59 59 0 012 14l1 16z" fill="#bc0f39" />
</g>
<g id="SCYTHE-2">
<path class="cls-18" d="M122 426l-100 7s28 161 167 156c37-2 69-27 66-31s-28 13-71-13c-58-35-62-119-62-119z" />
<g clip-path="url(#clip-path-3)">
<path class="cls-20" d="M116 588l-32 7 44-142 32-7-44 142zM133 595l-8 2 44-142 8-2-44 142z" />
<path d="M255 558s-50 29-108-1c-64-34-72-113-72-113" stroke="#969799" stroke-miterlimit="10" stroke-width="2.5" fill="none" />
</g>
<path class="cls-7" d="M10 434l121-10 4 18-123 13a11 11 0 01-12-8 11 11 0 0110-13z" />
</g>
<g id="KEY">
<path d="M244 570a26 26 0 011 4 30 30 0 01-3 17c-2 5-7 9-12 9a14 14 0 01-1 1c-5 0-9-3-13-6a30 30 0 01-7-17c-1-13 5-22 15-24 8-1 12 3 16 5a33 33 0 01-5 1h-5c-9-3-15 8-14 18a23 23 0 005 12c3 3 6 4 8 4s6-3 7-6c2-4 3-9 2-14z" fill="#9b8029" />
<path class="cls-18" d="M210 619h13v32h-12a1 1 0 01-1-1v-31z" transform="rotate(19 217 635)" />
<path d="M217 590h16a12 12 0 0112 13v26a1 1 0 01-1 2h-38a1 1 0 01-1-2v-26a12 12 0 0112-13z" transform="rotate(19 225 611)" fill="#1e1e1e" />
</g>
<g id="LEFT_HAND">
<path class="cls-6" d="M492 411c-5-2 2-10-6-17s-4-14 1-17c6-3 14 1 15 10s9 5 10 10-12 17-20 14zM526 419h1a1 1 0 000-2l-9-12a3 3 0 00-4-1l-17 10a3 3 0 00-1 4l5 14a1 1 0 001 1l2-1a1 1 0 000-1 29 29 0 01-3-7v-6c1 0 4 0 6 4l2 7a1 1 0 001 1l2-1a1 1 0 000-2 24 24 0 01-3-6c-2-5-3-6-2-7s5 1 7 5l3 6a1 1 0 001 1l2-1a1 1 0 000-1 62 62 0 01-5-8c-1-3-2-5-1-6s4 0 7 3l3 6a1 1 0 002 0zM489 428h-2v-1a35 35 0 002-6 60 60 0 001-8l3 1a27 27 0 00-2 7l-1 7h-1zM504 444h-2a22 22 0 000-5v-5l2-1v1a17 17 0 000 5v5zM513 441h-2l-1-1a19 19 0 001-4l-1-5h1l2-1a15 15 0 000 5 93 93 0 000 6zM521 437h-3v-1a19 19 0 000-4v-5l2-1 1 1a15 15 0 00-1 4l1 5v1z" />
<path class="cls-6" d="M528 429h-2v-1-3l-1-4 1-1h2a15 15 0 000 5 14 14 0 001 3l-1 1zM499 451l-1-1a13 13 0 002-3l2-2h1l1 1c1 0 1 0 0 0a10 10 0 00-2 2l-2 3h-1zM509 449l-2-1v-1a13 13 0 002-2l2-3s0-1 0 0h2a10 10 0 00-2 3l-2 4zM518 446h-2v-1a13 13 0 001-3l1-3h2a10 10 0 00-1 3l-1 4zM526 438l-2-1a13 13 0 001-4l1-3h2a10 10 0 00-1 4v3l-1 1zM493 436l-3 2v-1l-1-3-2-4v-1h3a10 10 0 001 4l2 3zM496 443a22 22 0 01-2 1l-1-2a6 6 0 00-1-2v-1l1-1h1a10 10 0 001 3 8 8 0 001 2z" />
</g>
<g id="RIGHT_HAND">
<path class="cls-6" d="M106 435c9 1 2-16 19-21s-31-17-36-10 3 31 17 31zM49 426l-1-2a2 2 0 010-2l22-12a5 5 0 017 2l17 26a5 5 0 010 5l-18 18a1 1 0 01-2 0l-1-2a1 1 0 010-1l10-9c3-5 4-7 3-9s-6-2-11 3l-8 8a1 1 0 01-3 0l-1-2a1 1 0 010-2 38 38 0 0010-8c5-5 8-7 7-9s-8-1-13 3l-9 7a1 1 0 01-2 0l-2-2a1 1 0 010-2 102 102 0 0012-8c5-3 8-6 7-8s-7-2-13 0l-9 6a2 2 0 01-2 0zM96 463l4 1a1 1 0 001 0 58 58 0 012-11 98 98 0 013-12 1 1 0 00-1-1h-4a1 1 0 000 1 45 45 0 01-2 11l-3 11zM64 476l3 2a1 1 0 001 0 36 36 0 013-8l3-6v-1l-2-2a1 1 0 00-1 0 28 28 0 01-3 8l-4 7zM53 466l3 1a1 1 0 001 0 32 32 0 013-7l4-7h-1l-2-3a1 1 0 00-1 1 25 25 0 01-3 7l-4 7a1 1 0 000 1zM44 455l4 1a32 32 0 013-7l4-7-1-1-2-2a1 1 0 00-1 1 25 25 0 01-3 7l-4 7a1 1 0 000 1zM39 438l3 1a1 1 0 001 0l2-5c3-4 3-7 3-7l-3-2a25 25 0 01-3 7 23 23 0 01-4 5l1 1zM66 491l3-1s1 0 0 0a21 21 0 01-2-6l-1-5h-4a16 16 0 012 6l1 6h1zM54 481l3-1h1a21 21 0 01-2-6v-5l-1-1h-3a16 16 0 011 6v6l1 1zM42 471h4a21 21 0 010-6l1-5-1-1-2-1h-1a16 16 0 010 6l-1 6v1zM35 452l3 1 1-1a21 21 0 011-5l1-6-3-2-1 1a16 16 0 010 6l-2 5v1zM86 473l3 4h1s0-2 3-4l6-5v-1l-3-2h-1a16 16 0 01-4 5l-5 3zM76 481a35 35 0 003 3l2-2a10 10 0 014-3l1-1-2-3h-1a17
HTML5 SVG优惠转盘抽奖特效.zip （5个子文件） 
jiaoben8520 js 
script.js 4KB css style.css 4KB reset.min.css 773B vYxKLOa.css 5KB
index.html 11KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 科技感 (9).pptx
- No.83 S7-1200 组态王基于PLC的污水处理控制系统设计 带解释的梯形图程序，接线图原理图图纸，io分配，组态画面
- comsol二维散热器分析
- 双头双Y自动锁螺丝机带压壳和下料机械手程序，采用显控触摸屏和台达PLC，用PLC做配方保存产品参数 单独用可以做三轴带下料机械手螺丝机，连机用便是双头双Y待下架机械手自动锁螺丝 下料机械手是横向的
- 基于peakcan PCAN UDS上位机 (14229 15765) 可以开发UDS小工具 新增支持CANFD的数据链路层通信
- jdk-17.0.13-linux-x64-bin
- 基于nuxt实现的博客前端和基于 Typescript + Node + Koa2 搭建的博客后端 完整的博客系统，可以学习参考
- CentOS7常用仓库
- 基于DBSCAN密度聚类的风电-负荷场景削减方法 关键词：密度聚类 场景削减 DBSCAN 场景生成与削减 kmeans 参考文档：《氢能支撑的风-燃气耦合低碳微网容量优化配置研究》第3章：完美复
- 基于共享储能电站的工业用户日前优化经济调度 关键词：优化调度 共享储能 日前优化 经济调度 文章提出一种基于共享储能电站的工业用户日前优化经济调度方法 首先提出共享储能电站的概念，分析其商业运
- 基于储能电站服务的冷热电多微网系统双层优化配置 关键词：储能电站 共享储能电站 冷热电多微网 双层优化配置 参考文档：《基于储能电站服务的冷热电多微网系统双层优化配置》完全复现 仿真平台：MA
- JVET-L0283-DraftText
- 基于储能电站服务的冷热电多微网系统双层优化配置 关键词：储能电站 共享储能电站 冷热电多微网 双层优化配置 参考文档：《基于储能电站服务的冷热电多微网系统双层优化配置》完全复现 仿真平台：MA
- 数据管理+建表须知+字段属性+占用字节
- 本文利用仿真软件Matlab编写计算潮流程序模拟分布式电源接入配电网的模型进行潮流计算的方法对分布式电源的稳态影响进行探索与分析 选取了9节点的配电网网络模型，通过对单个分布式电源的接入位置以及容量
- 基于YOLOv8的路口交通信号灯通行规则识别模型及算法源代码+文档说明（高分毕设）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
