HTML5圓形波浪載入動畫特效
HTML5圓形波浪載入動畫特效是一款原生html5+css3+canvas波浪滾動上升載入動畫,圓形載入容器效果。
var wave = (function () {
var ctx;var waveImage;
var canvasWidth;
var canvasHeight;
var needAnimate = false;
function init (callback) {
var wave = document.getElementById('wave');
var canvas = document.createElement('canvas');
if (!canvas.getContext) return;
ctx = canvas.getContext('2d');
canvasWidth = wave.offsetWidth;
canvasHeight = wave.offsetHeight;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
wave.appendChild(canvas);
waveImage = new Image();
waveImage.onload = function () {
waveImage.onload = null;
callback();
}
waveImage.src = 'images/wave.png';
}
function animate () {
var waveX = 0;
var waveY = 0;
var waveX_min = -203;
var waveY_max = canvasHeight * 0.7;
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };
function loop () {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
if (!needAnimate) return;
if (waveY < waveY_max) waveY += 1.5;
if (waveX < waveX_min) waveX = 0; else waveX -= 3;
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
requestAnimationFrame(loop);
}
loop();
}
function start () {
if (!ctx) return init(start);
needAnimate = true;
setTimeout(function () {
if (needAnimate) animate();
}, 500);
}
function stop () {
needAnimate = false;
}
return {start: start, stop: stop};
}());
wave.start();
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
19 Jan 2017
這是一款基於HTML5 Canvas和Rebound動畫的Loading載入動畫特效。該loading動畫使用canvas來覆蓋整個頁面,並顯示多邊形的loading載入器來表示載入進度。
27 Oct 2018
在網速不好的情況下打開網站或觀看視頻,頁面加載會很慢,這時一般會提示用戶“頁面正在加載中,請稍後”,而且會有一個圓圈一直在轉動。正在學習html和CSS的小夥伴,你會用CSS3實現圓圈載入動畫效果嗎?這篇文章就跟大家分享一個純CSS3實現的圓圈(loading)加載動畫特效,有興趣的小夥伴可以參考借鑒一下。
06 Mar 2017
HTML5的很大一個優點就是可以更有效率地製作網頁粒子動畫特效,特別是Canvas特性,可以實現在網頁上繪製任何圖形和動畫。本文要分享7款令人驚嘆的HTML5粒子動畫特效,這些粒子特效都提供原始碼下載供大家學習。 1.HTML5 Canvas粒子模擬效果這是一款利用HTML5 Canvas模擬出來的30000個粒子動畫,當你用滑鼠在canvas畫布上移動時,滑鼠周圍的一些粒子就會跟著你移動,並形成一定的圖案,就像你在玩沙畫一樣,效..
16 Mar 2017
js html5 canvas實現的塗鴉畫板特效,可調畫筆顏色|粗細|橡皮,可以保存塗鴉效果為圖片編碼,非常適合學習html5的canvas,必須支援html5的瀏覽器才能看到效果。
19 Jan 2017
這是一款使用HTML5 Canvas製作的黑板特效,該黑板特效支援手機行動端,它能模擬使用粉筆在黑板上寫字的效果。此黑板特效的特點還有:
12 Jun 2017
<!doctype html><html><head><meta charset=utf-8 /><title>html5 網頁特效 郵箱地址驗證</title><style<title>html5 網頁特效 郵箱地址驗證</title><style>bodybody,;>
25 Sep 2018
我們在瀏覽web網頁的時候會發現現在的網頁做的越來越美觀,很多動畫特效做的越來越酷,這離不開HTML5和css3的深入開發。今天我們要來分享一款以HTML5和css3為基礎的文字特效-粒子效果文字動畫特效。這篇文章帶給大家的內容是關於如何使用HTML5+css3實現粒子效果文字動畫特效,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
18 Jan 2017
這是一款使用效果非常酷炫的HTML5 SVG文字變形動畫特效。此特效使用SVG和anime.js,透過SVG描邊動畫來完成各種漂亮的字母動畫特效。
15 Jun 2017
基於HTML5的應用程式現在已經非常廣泛,今天我們就來向大家分享20款非常絢麗的HTML5/CSS3應用程式插件。希望大家喜歡並分享給你的好友們。 1、HTML5影片破碎重組特效 強大視覺衝擊HTML5影片播放器很多,但是HTML5影片特效還是很少見的,這款HTML5影片破碎重組特效非常刺激,給人強大的視覺衝擊。點擊影片任意地方,HTML5將會將這些區域擊碎,過一段時間,這些被擊碎的影片碎片又會自動重新組合...
Hot Tools
HTML5 Canvas愛心飄動動畫特效
HTML5 Canvas愛心飄動動畫特效是一款直接用瀏覽器開啟可以看到一顆心的生成動畫。
H5熊貓彈跳小遊戲原始碼
html5手機熊貓也瘋狂小遊戲原始碼。遊戲說明:長按螢幕調整熊貓彈簧的強度,跳到石柱上。掉到河裡遊戲結束。
html5情人節盒子動畫特效
基於svg繪製情人節一個個愛心盒子禮物打開動畫,愛心盒子動畫特效。
H5 3D滾球遊戲原始碼
html5酷炫3D彩球滾動手機遊戲代碼下載。遊戲介紹:一個彩色圓球滾動,透過滑鼠或手機觸控螢幕拖曳來控制彩球的運行當前線路軌跡。這是一款簡單易操作的手機小遊戲原始碼。