Kesan latar belakang animasi magma HTML5
Kesan latar belakang animasi magma HTML5
<!doctype html>
<html>
<kepala>
<meta charset="utf-8">
<title>可设置动画属性的HTML5岩浆动画背景特效</title>
<gaya>
@charset "UTF-8";
*, *:sebelum, *:selepas {
saiz kotak: kotak sempadan;
}
badan {
pelapik: 0;
jidar: 0;
limpahan: tersembunyi;
font-family: 'Roboto', sans-serif;
}
kanvas {
lebar: 100vw;
ketinggian: 100vh;
}
h1 {
jawatan: mutlak;
indeks z: 1;
lebar: 100%;
kiri: 0;
atas: 50%;
-webkit-transform: translateY(-50%);
ubah: terjemahY(-50%);
mod campuran-campuran: tindanan;
warna: rgba(0, 0, 0, 0.3);
ketinggian garisan: 0;
saiz fon: 16px;
jarak huruf: 4px;
penjajaran teks: tengah;
text-transform: huruf besar;
ubah: terjemahY(-50%);
kursor: penunjuk;
-webkit-transition: color .2s kemudahan-masuk-keluar;
peralihan: warna .2s mudah masuk;
-webkit-user-select: tiada;
-moz-user-select: tiada;
-ms-user-select: tiada;
pilihan pengguna: tiada;
}
h1:tuding {
warna: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<badan>
<skrip src="js/chroma.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<canvas id="canvas"></canvas>
<h1>Lantai ialah Lava</h1>
<skrip>
'gunakan ketat';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Tidak boleh memanggil kelas sebagai fungsi"); } }
tetapan var = {
amplitudX: 150,
amplitudY: 20,
baris: 30,
Warna mula: '#500c44',
endColor: '#b4d455'
};
var c = document.getElementById("kanvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var Laluan = [];
warna var = [];
var mouseY = 0;
var mouseDown = palsu;
var masa = 0;
lengkung var = tidak ditentukan;
var halaju = tidak ditentukan;
var Laluan = fungsi () {
fungsi Laluan(y, warna) {
_classCallCheck(ini, Laluan);
ini.y = y;
this.color = warna;
this.root = [];
this.create();
this.draw();
}
Path.prototype.create = function create() {
var rootX = 0;
var rootY = this.y;
this.root = [{ x: rootX, y: rootY }];
manakala (rootX < winW) {
var casual = Math.random() > 0.5 ? 1: -1;
var x = parseInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
var y = parseInt(rootY + casual * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
rootX += x;
kelewatan var = Math.random() * 100;
this.root.push({ x: rootX, y: y, ketinggian: rootY, santai: santai, kelewatan: kelewatan });
}
};
Path.prototype.draw = function draw() {
ctx.beginPath();
ctx.moveTo(0, winH);
ctx.lineTo(this.root[0].x, this.root[0].y);
untuk (var i = 1; i < this.root.length - 1; i++) {
var x = this.root[i].x;
var y = this.root[i].y;
var nextX = this.root[i + 1].x;
var nextY = this.root[i + 1].y;
var xMid = (x + nextX) / 2;
var yMid = (y + nextY) / 2;
var cpX1 = (xMid + x) / 2;
var cpY1 = (yMid + y) / 2;
var cpX2 = (xMid + nextX) / 2;
var cpY2 = (yMid + nextY) / 2;
ctx.quadraticCurveTo(cpX1, y, xMid, yMid);
ctx.quadraticCurveTo(cpX2, nextY, nextX, nextY);
}
var lastPoint = this.root.reverse()[0];
this.root.reverse();
ctx.lineTo(lastPoint.x, lastPoint.y);
ctx.lineTo(winW, winH);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
Laluan kembali;
}();
/* INIT */
laluan var = tidak ditentukan;
fungsi init() {
c.width = winW;
c.tinggi = winH;
Laluan = [];
warna = chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);
document.body.style = 'background: ' + settings.startColor;
untuk (var i = 0; i < settings.lines; i++) {
Paths.push(Path baharu(winH / settings.lines * i, color[i]));
settings.startY = winH / settings.lines * i;
}
}
/* MENANG UBAH SAIZ */
window.addEventListener('ubah saiz', fungsi () {
winW = window.innerWidth;
winH = window.innerHeight;
c.width = winW;
c.tinggi = winH;
init();
});
window.dispatchEvent(Peristiwa baharu("ubah saiz"));
/* RENDER */
fungsi render() {
c.width = winW;
c.tinggi = winH;
lengkung = mouseDown ? 2: 4;
halaju = mouseDown ? 6 : 0.8;
masa += mouseDown ? 0.1 : 0.05;
Paths.forEach(fungsi (laluan, i) {
path.root.forEach(fungsi (r, j) {
jika (j % lengkung == 1) {
var move = Math.sin(masa + r.delay) * halaju * r.santai;
r.y -= bergerak / 2 - bergerak;
}
jika (j + 1 % lengkung == 0) {
var move = Math.sin(masa + r.delay) * halaju * r.santai;
r.x += bergerak / 2 - bergerak / 10;
}
});
path.draw();
});
requestAnimationFrame(render);
}
render();
/* MOUSEDOWN */
'mousedown touchstart'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, function () {
mouseDown = benar;
});
});
/* MOUSEUP */
'mouseup mouseleave touchend'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, function () {
mouseDown = palsu;
});
});
/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, fungsi (e) {
tetikusY = e.klienY || e.sentuhan[0].klienY;
});
});
/* GUI DATA */
var gui = fungsi datgui() {
var gui = new dat.GUI();
// dat.GUI.toggleHide();
gui.closed = benar;
gui.add(tetapan, "amplitudeX", 40, 200).step(20).onChange(function (newValue) {
init();
});
gui.add(tetapan, "amplitudY", 0, 100).step(1).onChange(function (newValue) {
init();
});
gui.add(setting, "lines", 5, 50).step(1).onChange(function (newValue) {
init();
});
gui.addColor(tetapan, "startColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'atau apa sahaja yang anda mahu';
});
gui.addColor(tetapan, "endColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'atau apa sahaja yang anda mahu';
});
kembalikan gui;
}();
</skrip>
</body>
</html>
Ini ialah kesan latar belakang animasi magma HTML5 yang baik yang boleh menetapkan sifat animasi Kembangkan menu di bahagian atas sebelah kanan halaman web untuk menetapkan amplitud animasi, warna dan sifat lain.
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
Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar
21 Nov 2023
Cara menggunakan CSS untuk melaksanakan kesan animasi imej latar belakang yang berputar bagi elemen kesan animasi imej latar belakang boleh meningkatkan daya tarikan visual dan pengalaman pengguna halaman web. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan imej latar belakang, yang boleh berupa gambar yang anda suka, seperti gambar matahari atau kipas elektrik. Simpan imej dan namakannya "bg.png". Seterusnya, buat fail HTML dan tambahkan elemen div dalam fail, tetapkan kepada
Bagaimana untuk mencipta kesan animasi pergerakan teks latar belakang dalam Tayangan Perdana
05 Jun 2024
1. Buka Tayangan Perdana dan import fail video sasaran 2. Cipta tajuk sari kata baharu Kesannya adalah seperti yang ditunjukkan dalam rajah: 3. Anda boleh melukis kotak segi empat tepat dan mengisinya dengan warna sebagai warna latar belakang. rajah: 2. Buat sari kata 1. Buat sari kata yang diperlukan , edit, seperti yang ditunjukkan dalam gambar: 2. Sari kata yang baru dibuat akan dijana dalam projek, dan seretnya ke atas video, seperti yang ditunjukkan dalam gambar: 3. Anda boleh melihat kesan paparan sari kata, seperti yang ditunjukkan dalam gambar: 3. Kesan animasi bergerak 1. Akhir sekali, dalam pilihan gerakan di bawah kawalan kesan, alihkan kedudukan di luar video dan cipta bingkai kunci, seperti yang ditunjukkan dalam rajah : 2. Pada kedudukan yang diperlukan, cipta bingkai yang memaparkan sari kata latar belakang dan laraskan kedudukannya Biarkan ia dipaparkan pada kedudukan yang diperlukan, dan kesannya adalah seperti yang ditunjukkan dalam rajah: 3. Akhir sekali, cipta dua bingkai utama yang bertentangan, jadi bahawa ia boleh dicapai,
16 May 2016
Artikel ini terutamanya memperkenalkan pelaksanaan JS kesan menu lipatan animasi yang sesuai untuk kegunaan latar belakang Contoh menunjukkan dua kesan paparan menu lipatan, yang melibatkan kemahiran pelaksanaan JavaScript bagi traversal dinamik dan mengubah gaya elemen halaman sebagai tindak balas kepada acara tetikus berikut
Apa yang anda perlu tahu tentang cara memadam kesan animasi latar belakang PPT!
20 Mar 2024
Baru-baru ini, saya menerima surat daripada rakan sekelas bertanyakan tentang PPT bagaimana untuk membatalkan kesan animasi latar belakang dalam PPT. Seperti yang kita sedia maklum, apabila kita membuat PPT, untuk menjadikan PPT kelihatan lebih kaya, kita akan menggunakan kesan animasi. Atau, apabila kita menggunakan templat PPT untuk menganimasikan, latar belakang juga mempunyai kesan animasi tersendiri. Jadi, bagaimana untuk membatalkan kesan animasi PPT? Hari ini, kita akan bercakap tentang isu ini secara terperinci Pelajar yang berminat harus cepat mengumpulkannya! Langkah-langkahnya adalah seperti berikut: 1. Mula-mula, kita buka perisian PPT pada komputer dan buka fail PPT yang perlu diproses kemudian, kita dapati kesan [Animasi] di [Toolbar] di atas. 2. Selepas itu, kami mencari dan klik butang [Animation Pane] di sebelah kanan [Toolbar];
Cara membuat kesan khas zarah ae_Perkongsian teknik membuat animasi latar belakang zarah segi tiga
11 Jun 2024
1. Selepas membuka antara muka, tambahkan kesan kecerunan biru gelap pada lapisan latar belakang 2. Tekan kekunci Ctrl+Y pada papan kekunci untuk mencipta lapisan pepejal baharu Selepas menamakan semula lapisan zarah, tambahkan kesan zarah CCParticleWorld. Seperti yang ditunjukkan dalam rajah di bawah, tukar parameter zarah Tukar jenis kepada kesan TriPolygon 4. Akhir sekali, ubah suai paparan warna zarah dengan sesuai untuk latar belakang.
Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan latar belakang yang dinamik
20 Oct 2023
Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan latar belakang dinamik Dalam reka bentuk web, kesan animasi boleh menambah kecerahan halaman dan menarik perhatian pengguna. Animasi CSS ialah cara untuk mencapai kesan ini. Tutorial ini akan mengajar anda langkah demi langkah cara menggunakan CSS untuk mencapai kesan latar belakang yang bergerak, menggunakan contoh kod khusus untuk memudahkan anda memahami dan menggunakan. Langkah 1: Buat struktur HTML Mula-mula, kita perlu mencipta struktur HTML yang mengandungi kandungan. Tambahkan elemen div dalam teg badan dan berikannya yang unik
Tutorial Animasi CSS: Ajar anda langkah demi langkah cara mencapai kesan latar belakang yang berkelip
19 Oct 2023
Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan latar belakang yang berkelip Pengenalan: Dalam reka bentuk web, kesan animasi boleh menambah daya hidup dan menarik kepada halaman web. Animasi CSS ialah cara yang mudah tetapi berkuasa untuk mencapai kesan animasi. Tutorial ini akan mengajar anda langkah demi langkah cara menggunakan animasi CSS untuk mencapai kesan latar belakang yang berkelip dan memberikan contoh kod khusus. 1. Struktur HTML Mula-mula, kita perlu mencipta struktur HTML yang mengandungi unsur-unsur yang akan digunakan animasi. Dalam contoh ini, kami akan mencipta elemen div dan memberikannya id unik, seperti
Bagaimana untuk Mencipta Kesan Lukisan Bulatan Animasi Lancar dengan Latar Belakang Lutsinar Menggunakan CSS Sahaja?
25 Oct 2024
CSS Sahaja Animasikan Bulatan Lukis dengan jejari sempadan dan Latar Belakang TelusMasalah:Cara mencipta bulatan jejari sempadan animasi dengan...
16 May 2016
Artikel ini terutamanya memperkenalkan pelaksanaan jquery bagi kesan tatal kiri dan kanan, kesan tatal latar belakang kecerunan dan grafik bagi menu animasi Ia menganalisis beberapa kesan transformasi dinamik latar belakang yang biasa digunakan dalam jquery dengan contoh Ia melibatkan teknik pelaksanaan kesan animasi halaman operasi dinamik, yang mempunyai tertentu nilai rujukan, rakan-rakan yang memerlukan boleh merujuknya
Hot Tools
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.