本篇文章给大家分享的是有关如何在HTML5中为图片添加动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。html是什么html的全称为超文本标记语言，它是一种标记语言，包含
本篇文章给大家分享的是有关如何在HTML5中为图片添加动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
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.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中为图片添加动画效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。
--结束END--
本文标题: 如何在html5中为图片添加动画效果
本文链接: https://www.lsjlt.com/news/248234.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0