<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5/SVG就餐时钟指示动画</title>
<style>
body {
background: #222;
}
p {
color: #FFF;
text-align: center;
font-family: 'Space Mono', monospace;
}
a {
color: #8CA3A4;
}
.container {
margin: 3em auto;
position: relative;
}
.container svg {
display: block;
margin-left: auto;
margin-right: auto;
}
#scene2 {
clip-path: url(#clipping);
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<div class="container">
<svg version="1.1" viewBox="0 0 1437.3 653.3" preserveAspectRatio="minXMinY meet">
<style type="text/css">
.st0 {
opacity: 0.5;
fill: url(#SVGID_1_);
}
.st1 {
fill: #F1E6D4;
}
.st2 {
fill: #DFCFBA;
}
.st3 {
fill: #F2E7D5;
}
.st4 {
opacity: 0.2;
fill: #D7BBA7;
}
.st5 {
opacity: 0.15;
fill: #623E39;
}
.st6 {
opacity: 0.5;
fill: url(#SVGID_2_);
}
.st7 {
fill: #EAE9D8;
}
.st8 {
fill: #D3D2C3;
}
.st9 {
fill: #D3CBC3;
}
.st10 {
fill: #E6CC85;
}
.st11 {
fill: #BB9278;
}
.st12 {
fill: #F2CFAB;
}
.st13 {
fill: #CDC1A9;
}
.st14 {
fill: #BBAB97;
}
.st15 {
fill: #67443C;
}
.st16 {
opacity: 0.5;
fill: #1F0700;
}
.st17 {
fill: #925B4B;
}
.st18 {
fill: #653D33;
}
.st19 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st20 {
opacity: 0.35;
fill: #1E0B01;
}
.st21 {
fill: none;
stroke: #BF9247;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #996C46;
stroke-miterlimit: 10;
}
.st23 {
fill: #E0BEA1;
}
.st24 {
opacity: 0.25;
}
.st25 {
fill: #F9B66C;
}
.st26 {
fill: #F8B46B;
}
.st27 {
fill: #F8B16B;
}
.st28 {
fill: none;
}
.st29 {
fill: #B8977B;
}
.st30 {
fill: #855346;
}
.st31 {
opacity: 0.15;
}
.st32 {
fill: #CCB295;
}
.st33 {
fill: #BF9055;
}
.st34 {
fill: #D4A265;
}
.st35 {
fill: none;
stroke: #623E39;
stroke-width: 8;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st36 {
fill: #B7967A;
}
.st37 {
fill: #A79680;
}
.st38 {
fill: #E1CAAD;
}
.st39 {
fill: #EEE2D7;
}
.st40 {
fill: #E8E4DB;
}
.st41 {
fill: #624544;
}
.st42 {
fill: #925B4D;
}
.st43 {
fill: #5B5250;
}
.st44 {
fill: #D0B094;
}
.st45 {
fill: #B3987B;
}
.st46 {
fill: #EBCBA7;
}
.st47 {
fill: #3B231A;
}
.st48 {
opacity: 0.35;
fill: url(#SVGID_3_);
}
.st49 {
fill: #8CA3A4;
}
.st50 {
fill: #EFD3A8;
}
.st51 {
fill: #BFC6B6;
}
.st52 {
fill: #ABB6AF;
}
.st53 {
opacity: 0.5;
fill: #130001;
}
.st54 {
fill: #E7CE9B;
}
.st55 {
fill: #AF716E;
}
.st56 {
fill: #B2CAD9;
}
.st57 {
fill: #B86E69;
}
.st58 {
fill: #734B42;
}
.st59 {
fill: #85594F;
}
.st60 {
fill: #8A5E52;
}
.st61 {
opacity: 0.35;
fill: #130001;
}
.st62 {
fill: #5C403B;
}
.st63 {
fill: #322626;
}
.st64 {
fill: #D5C1A7;
}
.st65 {
fill: #F6C679;
}
.st66 {
fill: #F6BE78;
}
.st67 {
fill: #CDB09B;
}
.st68 {
fill: #995F5C;
}
.st69 {
fill: #EBD8AF;
}
.st70 {
fill: #DBBDA6;
}
.st71 {
fill: #9B9B89;
}
.st72 {
fill: #E0E5E8;
}
.st73 {
fill: #6F4E4A;
}
.st74 {
fill: #98B3BA;
}
.st75 {
fill: #D5C2B5;
}
.st76 {
fill: #EBD9B4;
}
.st77 {
fill: #85A3AB;
}
.st78 {
fill: #D4AE95;
}
.st79 {
fill: #C5B39B;
}
.st80 {
opacity: 0.3;
fill: #C6D5DD;
}
.st81 {
fill: #5D4746;
}
.st82 {
opacity: 0.35;
fill: url(#SVGID_4_);
}
</style>
<defs>
<clipPath id="clipping">
<polygon id="star" points="388.6,0 0,652.3 1040,654.4 1437.3,4 " />
</clipPath>
<symbol id="plate" viewBox="-105.6 -97.7 151.2 142">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.1915" y1="5.5424" x2="-56.2778" y2="-99.2546">
<stop offset="0.3991" style="stop-color:#623E39" />
<stop offset="1" style="stop-color:#623E39;stop-opacity:0" />
</linearGradient>
<polygon class="st0" points="45.6,3 44.2,-8.4 -10.7,-97.7 -105.6,-96.7 -44,3
HTML5 SVG实现的就餐时钟指示动画效果源码.zip （3个子文件） 
132689842526451479 
index.html 83KB js 
jquery-1.11.1.min.js 94KB TweenMax.min.js 109KB资源评论
毕业_设计
- 粉丝: 1998
- 资源: 1万+
最新资源
- 飞思卡尔，整车VCUsimulink源码 上下电管理 扭矩控制 故障处理 适合想了解整车控制的工程师们，学习参考
- c#联合halcon机器视觉通用视觉框架2 流程化开发 缺陷检测，定位，测量，OCR识别 拉控件式
- delta机械臂，delta机器人，运动控制器，运动控制卡 本卡采用前瞻运动轨迹规划，运动采用G代码指令编程，具有G5三维空间的圆弧插补，空间直线插补功能，子程序编程功能，逻辑判断语句功能，示教编程功
- AD源文件及Verilog程序源码，包含AD的PCB源码和quartus程序源码，板子为四层板，程序为verilog，主控芯片为fpga 功能包括千兆以太网通讯(RTL8211EG芯片)，micro
- 三菱PLC与两台变频器通讯控制三菱PLC通过MODBUS控制两台士林变频器程序，PLC可以用3U或者3G
- 设计区域电网输电线路高低定值闭锁式方向pscad仿真模型 功率方向元件采用90度接线，低定值启动发信，低定值启动后，如果满足高定值动作条件，保护动作，跳开线路两侧断路器 设计区域电网输电线路复合电压
- 深度强化学习DQN车间排产调度优化算法+gym环境（python代码）
- Java面试题（全栈） 完整版.md
- 三菱FX3U两轴标准程序，XZ两轴，包含轴点动，回零，相对与绝对定位，只要弄明白这个程序，就可以非常了解整个项目的程序如何去编写，从哪里开始下手
- BLDC无刷直流电机和PMSM永磁同步电机 可提供所有代码中所有算法的，每个代码都亲自验证过 基于STM32F1的有传感器和无传感驱动 直流无刷电机有传感器和无传感驱动程序， 无传感的实现是基于反电
- 移远EC800K-cn AT命令手册
- usb协议中文，个人学习整理，仅供参考
- IPOP4.1.exe
- 两阶段鲁棒优化程序 本程序采用微网为模型，主要将安装成本、运营成本以及综合效益三个方面纳入考虑范围，建立两阶段鲁棒优化模型，采用的是CCG方法，本程序为matlab编制
- C#上位机 APP监控西门子S7-1200 C#全套源代码 1，C#开发上位机手机APP，自己写的程序可提供部分 2，通过VS2019开发安卓手机app 3，全套源代码，现场运行设备实测有效 4
- MATLAB代码：考虑过网费用分摊的多产消者点对点能源交易分布式优化 关键词：点对点P2P交易 过网费用 分布式优化 ADMM 交替方向乘子法 仿真平台：MATLAB+自带的优化工具箱 主要内容
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
