Kesan khas animasi pemuatan gelombang pekeliling HTML5
Kesan khas animasi pemuatan gelombang pekeliling HTML5
Kesan khas animasi pemuatan gelombang pekeliling HTML5 ialah animasi pemuatan naik gelombang bergolek HTML5+css3+kanvas asli dengan kesan bekas pemuatan bulat.
gelombang var = (fungsi () {
varctx;var waveImage;
var canvasWidth;
var canvasHeight;
var needAnimate = palsu;
fungsi init (panggilan balik) {
var wave = document.getElementById('wave');
var canvas = document.createElement('canvas');
jika (!canvas.getContext) kembali;
ctx = canvas.getContext('2d');
canvasWidth = wave.offsetWidth;
canvasHeight = wave.offsetHeight;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
wave.appendChild(kanvas);
waveImage = Imej baharu();
waveImage.onload = fungsi () {
waveImage.onload = null;
panggil balik();
}
waveImage.src = 'images/wave.png';
}
fungsi menghidupkan () {
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 ||
fungsi (panggil balik) { window.setTimeout(callback, 1000 / 60);
gelung fungsi () {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
jika (!needAnimate) kembali;
if (waveY < waveY_max) waveY += 1.5;
jika (waveX < waveX_min) waveX = 0; other 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 = 'sumber-masuk';
ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
requestAnimationFrame(gelung);
}
gelung();
}
fungsi mula () {
jika (!ctx) kembalikan init(mula);
needAnimate = benar;
setTimeout(fungsi () {
if (needAnimate) animate();
}, 500);
}
hentian fungsi () {
needAnimate = palsu;
}
kembali {mula: mula, berhenti: berhenti};
}());
wave.start();
Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn
Artikel Berkaitan
Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?
05 Apr 2025
Melaksanakan kesan paparan secara beransur -ansur memendekkan teks dalam reka bentuk web, bagaimana untuk mencapai kesan paparan teks khas untuk menjadikan panjang teks secara beransur -ansur memendekkan? Kesan ini ...
Bagaimana cara menggunakan plug-in JavaScript untuk mencapai kesan peretasan halaman dan pergerakan bebas elemen?
04 Apr 2025
Melaksanakan kesan penetapan halaman bar dan elemen skrol bergerak secara bebas dalam reka bentuk web, kadang -kadang kita perlu mencapai kesan khas, iaitu, apabila tatal tatal tatal ...
Bagaimana untuk mencapai kesan tetingkap terapung CSS dan bagaimana menyelesaikan masalah peristiwa hover yang merosakkan?
05 Apr 2025
Pelaksanaan kesan Hover CSS dan Penyiasatan Masalah Artikel ini akan membincangkan cara menggunakan CSS untuk mencapai kesan tingkap terapung khas dan menyelesaikan masalah yang dihadapi semasa proses pelaksanaan ...
Bagaimana cara menggunakan CSS untuk mencapai kesan panjang teks yang memendekkan secara beransur -ansur dalam laman web?
05 Apr 2025
Melaksanakan kesan panjang teks yang memendekkan secara beransur -ansur dalam reka bentuk web, kadang -kadang kita akan melihat kesan paparan teks khas, iaitu panjang teks akan beransur -ansur berubah ...
Bagaimana menggunakan CSS tulen untuk mencapai kesan warna elemen berselang dengan N%3?
05 Apr 2025
Teknik menggunakan CSS murni untuk merealisasikan kesan bergantian warna elemen oleh N%3. Dalam pembangunan front-end, kadang-kadang kita perlu melaksanakan beberapa kesan visual khas, seperti berdasarkan elemen ...
CSGO Kesan Khas Blockbuster Movi
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) adalah penembak orang pertama yang disayangi oleh pemain di seluruh dunia. Pertandingan yang menarik dan video kesan khas yang berkualiti tinggi selalu menjadi topik untuk dibincangkan oleh pemain. Sama ada liga profesional yang mendebarkan atau perlawanan persahabatan antara pemain biasa, ia dapat menunjukkan kesan dan strategi khas yang luar biasa dalam permainan. Artikel ini akan memperkenalkan anda secara terperinci bagaimana untuk mencari dan menonton CSGO Kesan Khas Blockbusters secara terperinci untuk memastikan bahawa anda dapat mengalami keseronokan visual yang terbaik.
10 jQuery cool menu kesan plugin
01 Mar 2025
10 Menu JQuery Cool Kesan Khas Plug-Ins Untuk Meningkatkan Pengalaman Pengguna Laman Web! Kami telah berkongsi banyak plugin menu navigasi jQuery, dan sekarang kami membawa anda 10 lagi plugin kesan menu jQuery yang menakjubkan. Nikmati! Bacaan Berkaitan: - 10 Menu Navigasi JQuery yang mempesonakan - 15 Menu Navigasi JQuery yang sangat baik Menu klik kanan Plugin ini sangat mudah digunakan dan padat, membolehkan anda membuat menu klik kanan. Demo Kod Sumber 2. JQuery Multi-Level Menu-Menu CSS FX dengan submenu Menu CSS 100%, kesan visual yang disediakan oleh jQuery. Hanya gunakan JavaScript untuk melaksanakan kesan khas. Serasi sepenuhnya dengan penyemak imbas, pakej
Bagaimana untuk melaksanakan tepi putih di CSS dan menambah kesan bayangan?
05 Apr 2025
Masalah Gaya CSS: Melaksanakan tepi putih dalam teks dan tambahkan kesan bayangan. Dalam reka bentuk gaya CSS, pemprosesan khas teks sering diperlukan, seperti menambahkan tepi putih ...
Bagaimanakah laman web rasmi DeepSeek mencapai kesan menembusi acara tatal tetikus?
30 Apr 2025
Bagaimana untuk mencapai kesan penembusan peristiwa menatal tetikus? Apabila kami melayari web, kami sering menghadapi beberapa reka bentuk interaksi khas. Sebagai contoh, di laman web rasmi DeepSeek, ? ...
Alat panas
HTML5 Kesan khas animasi berdebar jantung Kanvas
HTML5 Canvas heart fluttering animation kesan khas ialah animasi yang dijana yang boleh dibuka terus dengan penyemak imbas untuk melihat hati.
Kod sumber permainan panda melantun H5
HTML5 Mobile Panda juga merupakan kod sumber permainan yang gila. Perihalan permainan: Tekan dan tahan skrin untuk melaraskan kekuatan spring panda dan lompat ke tiang batu. Permainan berakhir jika anda jatuh ke dalam sungai.
HTML5 Kesan khas animasi kotak Hari Valentine
Berdasarkan svg, lukis animasi membuka hadiah kotak cinta pada Hari Valentine dan kesan khas animasi kotak cinta.
Kod sumber permainan bola bergolek H5 3D
Muat turun kod permainan mudah alih bergolek bola 3D HTML5 yang hebat. Pengenalan permainan: Bola berwarna bergolek, dan trek semasa bola berwarna dikawal dengan menyeretnya menggunakan tetikus atau skrin sentuh telefon bimbit. Ini ialah kod sumber permainan mudah alih yang ringkas dan mudah dikendalikan.