Heim

JS-Spezialeffekte

HTML5-Spezialeffekte

HTML5圆形波浪加载动画特效

Jetzt downloaden Vorschau

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();

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

HTML5 SVG带圆形进度条动画的提交按钮特效

17 May 2016

这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效。该提交按钮在被点击之后，按钮变形为一个圆形的进度条，当进度条运行一周之后，可以设置提交成功和提交失败的两种按钮状态。查看演 ... ...，。

Pure CSS3 realisiert spezielle Animationseffekte zum Laden von Seitenkreisen

27 Oct 2018

Wenn die Internetgeschwindigkeit nicht gut ist, wird die Seite beim Öffnen einer Website oder beim Ansehen eines Videos sehr langsam geladen. Zu diesem Zeitpunkt wird der Benutzer normalerweise aufgefordert, „Die Seite wird geladen, bitte warten“ und es wird ein Kreis angezeigt rotiert weiter. Freunde, die HTML und CSS lernen, können Sie CSS3 verwenden, um den Kreislade-Animationseffekt zu erzielen? In diesem Artikel wird ein in reinem CSS3 implementierter Kreis-(Lade-)Animations-Spezialeffekt vorgestellt. Interessierte Freunde können darauf verweisen.

Detaillierte Einführung von 20 wunderschönen HTML5/CSS3-Anwendungs-Plug-Ins (Bilder)

09 Mar 2017

Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos, starke visuelle Wirkung Es gibt viele HTML5-Video-Spezialeffekte, aber diese Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie auf eine beliebige Stelle im Video, und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese zerbrochenen Videofragmente automatisch wieder zusammengesetzt. Es ist ein sehr gutes HTML5-Video.

Detaillierte Einführung in CSS3

15 Jun 2017

Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos Es gibt viele HTML5-Videoplayer, aber diese Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie irgendwo im Video und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese kaputten Videofragmente automatisch wieder zusammengesetzt ...

Empfohlene 3 Artikel über Videofragmentierung und -reorganisation

15 Jun 2017

Auf HTML5 basierende Anwendungen sind mittlerweile weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos Es gibt viele HTML5-Videoplayer, aber diese Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie irgendwo im Video und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese kaputten Videofragmente automatisch wieder zusammengesetzt ...

JavaScript HTML5 Canvas implementiert Bildfragmentierung und Reorganisationsanimation, Spezialeffekte_Javascript-Fähigkeiten

16 May 2016

In diesem Artikel werden hauptsächlich die Video-Spezialeffekte der Fragmentierung und Reorganisation mithilfe der JavaScript-HTML5-Leinwand vorgestellt.

HTML5-Fortschrittsbalken Spezialeffekte_HTML5-Tutorial-Fähigkeiten

16 May 2016

In diesem Artikel werden hauptsächlich die Spezialeffekte des HTML5-Fortschrittsbalkens vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

Teilen Sie einen HTML5-E-Magazin-Flipbook-Spezialeffektcode

28 Apr 2017

HTML5-E-Magazin-Flip-Book-Animations-Spezialeffekte, erstellen Sie ein Fotoalbum von Ihnen oder jemandem mit Ihren Fotos.

Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]

23 Dec 2020

Dang Dang Dang~ Die neuesten coolen und wunderschönen Spezialeffekte für Weihnachtsanimationen sind da! Einschließlich in HTML5, CSS3, JQuery und anderen Sprachen implementierter Spezialeffekte, die einfach und schön sind. Sie können auf den Link im Text klicken, um eine Vorschau der Animationen anzuzeigen

See all articles