整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了解canvas动画实现的过程与原理。并将其发布到头条，也希望对有兴趣的初学者了解HTML5 Canvas等有所帮助。图片分组图片素材如下：
素材一
实现动画的素材我们已经给出，主要通过gif动图导出一组图片，下面对html5动画实现过程进行简单说明。
实现其动画的基本思路是通过HTML5提供的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。其中绘图主要使用drawImage方法进行绘图，最终通过图片依次重绘实现动画效果。具体实现过程如下：
在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：
添加画布元素
canvas浏览效果
使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：
drawImage方法原型
因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：
加载图片资源代码
本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：
onload事件及绘图初始化
使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：
setInterval函数
在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：
setInterval完整代码
HTML动画效果展示
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：
多特效代码请添加HTML5前端交流群581549454
废话不多说，上代码！
下面是两段CSS代码
lib.css
@charset 'utf-8';
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
perspective: 1000px;
}
.bg0 {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(../images/bg0.png) no-repeat center center;
background-size: 150%;
}
.bg1 {
width: 100%;
height: 100%;
background: url(../images/bg1.png) no-repeat center center;
}
.hx-box {
top: 50%;
left: 50%;
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg);
}
.hx-box ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box ul li {
width: 500px;
height: 500px;
border: 4px solid #5ec0ff;
border-radius: 1000px;
}
.hx-box ul li span {
display: block;
width: 100%;
height: 100%;
background: url(../images/hx.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k2 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k3 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
tabris.css
@charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}hr,img{border:0}pre,textarea{overflow:auto}hr,legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{color:#333;font-size:1em;line-height:1.42857143;font-family:Helvetica,'Hiragino Sans GB','Microsoft Yahei','微软雅黑',Arial,sans-serif}body,form,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,ul{padding-left:0;list-style-type:none}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:400}a{text-decoration:none;background-color:transparent;color:inherit}a:active,a:hover{outline:0}li{list-style:none}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}.vm,audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:1px;border-top:1px solid #ccc;margin:1em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.dv{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.dv.dvv:active,.dv.dvv:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.dn{display:none}.db{display:block}.fix:after,.fix:before{content:" ";display:table}.fix:after{clear:both}.fl{float:left}.fr{float:right}.pr{position:relative}.pa,.pa0{position:absolute}.pa0{left:0;top:0}.oh{overflow:hidden}.wh{width:100%;height:100%}.bo{border:1px solid red}.mg{margin-left:auto;margin-right:auto}.tc{text-align: center;}.wp{margin:0 auto}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
网站格式代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>CSS3仿QQ浏览器官网彗星动画背景特效</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/tabris.css">
<link rel="stylesheet" href="css/lib.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="bg0 pa">
<div></div>
</div>
<div class="hx-box pa">
<ul>
<li class="hx-k1 pa0">
<span></span>
</li>
<li class="hx-k2 pa0">
<span></span>
</li>
<li class="hx-k3 pa0">
<span></span>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.aaa-cg.com.cn/xue/?lcc" target="_blank">素材</a></p>
</div>
</body>
</html>
事实证明，Flash 已经不再是互联网视频浏览的必需……新的开放标准已经被创立，比如 HTML5 这样的标准才会在移动设备和个人电脑上同样取得成功。”
乔布斯在 2010年的公开信《关于 Flash 的一点思考》中说。
在这封公开信中，乔布斯是这样解释 HTML5 的：最新的网络标准，已经为苹果、谷歌等许多公司所采用，它允许开发者开发出更为高级的图形、印刷和动画，并且不需要第三方浏览器插件（如 Flash ）就能转换。当然，也正是苹果和谷歌这样的科技公司在推动着 HTML5、CSS 和 JavaScript 等开放标准的普及和发展。
有关 HTML5 的优势，我在《HTML5是什么鬼？》也进行过总结。
这是2016年朋友圈的新现象：不论是网页邀请函，节日游戏，还是品牌广告，那些被分享出来的 HTML5 页面不断尝试着用更有意思、更流畅的方式来讲述每一个事件。
过去一年，几乎所有人——你的甲方，你最喜欢的品牌，你朋友任职的互联网公司，都意识到了 HTML5 的作用。它不是一个简单的网页，而是能够更加有效地组织互联网中的信息，让视频、音频等服务得到更好的支持；并在减轻开发者的负担的同时，让你在不同的平台上有更一致的体验。
对于用户来说，通过 HTML5 获得了前所未有的体验，与品牌产生共鸣或是激起好奇心，这才是最重要的。
一个月前的天猫双十一狂欢节 HTML5 推广页面《穿越宇宙来看你》，在全景应用的基础之上，添加了上下滑动预览节目单的功能，用户在迅速到达天猫所在舞台的过程中，还可以看到两侧会场的各种信息。
相比去年《2015，世界为谁倾倒？》不停180度翻转手机的折腾，你会发现，2016年的HTML5页面则更加简单、粗暴。
225 张内置素材，通过拍摄、合成、3D渲染等制作方式，最后以平面图片的形式导出 HTML5 页面，最终网站的总体量却在5MB以内。
Durex GO
杜蕾斯在七夕节开发出一款类《Pokemon Go》游戏《Durex GO》，只是将捕捉目标更换成喜鹊。用户在地图上可以看到自己身边的喜鹊，不同的喜鹊会在游戏进行一段时间后，进化为代金券、杜蕾斯产品或是酒店钥匙等，捕捉成功的用户可以将其兑换为相应的产品。
一个 HTML5 的成功往往得益于更立体的视觉和听觉感受，与用户更有趣的互动，就像通过万花筒来观察世界一样，为你呈现出前所未有的景象。
以此为理念，推陈出新的优酷万花筒 HTML5，用万花筒的成像方式将每一类内容中最具代表性的元素进行合理地拆分，再重组。在英文中，Kaleidoscope（万花筒）集合了希腊语 Kalos（美丽），Eidos（形状）和 Scope（观看）的意思，这也正是优酷想要在这支万花筒式的 HTML5 中想要传递的——丰富的色彩，多样的表达。
你不会想到，仅仅在一个 HTML5 中，制作方就使用了 Web Graphics Library（Web GL）3D 绘图标准完成绘制，它可以为 HTML5 Canvas 提供硬件3D加速渲染，有效地帮助Web开发人员借助系统显卡来浏览器里更流畅地展示3D场景和模型，甚至是更为复杂的导航和数据的视觉化。
点击阅读原文体验这个 HTML5 前你可能还需要知道，它最终展现了优酷的“焕新”计划：如果曾经的优酷是一家视频网站，那么现在的优酷就要成为一家很酷的视频网站。
在视频渐渐成为互联网内容主流载体的时代到来时，作为用户的你每时每刻都能够知晓世界各地正在发生的事情，视频帮助我们记录每一个短暂的、伟大的时刻，也正是这些时刻，带给你一次次的感动、震撼。
总之，你将逐渐看到一个崭新的优酷。
这个世界当然很酷，优酷正在做的是努力让你看到这个很酷的世界、世界的每一面，就像在万花筒中看到缤纷的颜色、妙不可言的几何图形，从内心深处被打动。“焕新”计划或许只是优酷作为这个行业的一份子向前迈出的一小步，但这也让作为用户的你看到了，优酷想要为你呈现一个更美好的世界的心愿。
一镜到底的万花筒，大剧热综都藏在里面了，点击【阅读原文】，打开音乐，用手指触碰出一个更炫的世界。
乌 云 装 扮 者
To see behind walls.To draw closer.To find
each other and to feel.That is the purpose of life.
世界、黑色趣味和明亮内心
*请认真填写需求信息，我们会在24小时内与您取得联系。
