溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何在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 = 'http://www.cj365.cc/demo/bird/bird.png';
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中為圖片添加動畫效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
