如何在html5中为图片添加动画效果
本篇文章给大家分享的是有关如何在html5中为图片添加动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
操作环境：windows7系统、html5&&css3版，DELL G3电脑。
html5添加图片动画效果的方法：
方法一：利用css3 animation的steps实现spirit精灵动画；
在应用 CSS3 渐变/动画时，有个控制时间的属性<timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。
steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。
那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> .bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; } @keyframes bird{ from { background-position: 0 0; } to { background-position: -800% 0px; } } </style> </head> <body> <div></div> </body></html>方法二：利用html5 canvas实现gif图片；
利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>canvas帧--实现动画</title> <style> *{padding:0;margin:0;} canvas{display:block;background:white} </style></head><body> <canvas></canvas><script> var imgPic = new Image(); imgPic.class="lazy" data-src = 'https://file.lsjlt.com/upload/202306/06/vd2icok5bk0.jpg'; var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); imgPic.onload = function () { drawImg() } var i = 0; var lastTime = new Date().getTime(); var delatime; var timer = 0; function drawImg() { window.requestAnimationFrame(drawImg); var now = new Date().getTime(); delatime = now - lastTime; lastTime = now; timer += delatime; if (timer > 200) { i++; if (i > 7) i = 0; timer = 0 } console.log(delatime) ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85); }</script></body></html>以上就是如何在html5中为图片添加动画效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
