HTML5 ??? ????? ?? ??
<!doctype html>
<html>
<??>
<meta charset="utf-8">
<title>可設(shè)置動(dòng)畫(huà)屬性的HTML5巖漿動(dòng)畫(huà)背景特效</title>
<???>
@charset "UTF-8";
*, *:??, *:?? {
? ?? ?? ??: ??? ??;
}
? {
? ??: 0;
? ??: 0;
? ????: ??;
? ?? ??: '???', ????;
}
??? {
? ??: 100vw;
? ??: 100vh;
}
h1 {
? ??: ??;
? Z-??: 1;
? ??: 100%;
? ??: 0;
? ??: 50%;
? -webkit-transform: ??Y(-50%);
? ? ? ? ? ??: ??Y(-50%);
? ?? ?? ??: ????;
? ??: rgba(0, 0, 0, 0.3);
? ? ??: 0;
? ?? ??: 16px;
? ?? ??: 4px;
? ??? ??: ??;
? ??? ??: ???;
? ??: ??Y(-50%);
? ??: ???;
? -webkit-transition: ?? .2s easy-in-out;
? ??: ?? .2s easy-in-out;
? -webkit-user-select: ??;
? ? ?-moz-user-select: ??;
? ? ? -ms-??? ??: ??;
? ? ? ? ? ??? ??: ??;
}
h1:?? {
? ??: rgba(0, 0, 0, 0.8);
}
</???>
</??>
<?>
<script src="js/chroma.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<canvas id="canvas"></canvas>
<h1>??? ?????</h1>
<????>
'??? ??';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("???? ??? ??? ? ????."); } }
?? ?? = {
? ??X: 150,
? ??Y: 20,
? ?: 30,
? ?? ??: '#500c44',
? endColor: '#b4d455'
};
var c = document.getElementById("???");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var ?? = [];
var ?? = [];
var ???Y = 0;
var mouseDown = false;
?? ?? = 0;
var ?? = ???? ??;
var ?? = ???? ??;
var ?? = ?? () {
? ?? ??(y, ??) {
? ? _classCallCheck(this, Path);
? ? this.y = y;
? ? this.color = ??;
? ? this.root = [];
? ? this.create();
? ? this.draw();
? }
? Path.prototype.create = ?? ??() {
? ? var rootX = 0;
? ? var rootY = this.y;
? ? this.root = [{ x: rootX, y: rootY }];
? ? while (rootX < winW) {
? ? ? var ??? = Math.random() > 0.5? 1 : -1;
? ? ? var x = parsInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
? ? ? var y = parsInt(rootY + ??? * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
? ? ? ??X += x;
? ? ? var ?? = Math.random() * 100;
? ? ? this.root.push({ x: rootX, y: y, ??: rootY, ???: ???, ??: ?? });
? ? }
? };
? Path.prototype.draw = ?? draw() {
? ? ctx.beginPath();
? ? ctx.moveTo(0, winH);
? ? ctx.lineTo(this.root[0].x, this.root[0].y);
? ? for (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();
? };
? ?? ??;
}();
/* ??? */
var ?? = ???? ??;
?? ???() {
? c.?? = winW;
? c.?? = winH;
? ?? = [];
? color =chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);
? document.body.style = '??:' + settings.startColor;
? for (var i = 0; i < settings.lines; i++) {
? ? Paths.push(new Path(winH / settings.lines * i, color[i]));
? ? settings.startY = winH / settings.lines * i;
? }
}
/* ?? ?? ?? */
window.addEventListener('resize', function () {
? winW = window.innerWidth;
? winH = window.innerHeight;
? c.? = winW;
? c.?? = winH;
? ???();
});
window.dispatchEvent(new Event("resize"));
/* ??? */
?? ???() {
? c.? = winW;
? c.?? = winH;
? ?? = mouseDown ? 2 : 4;
? ?? = mouseDown ? 6 : 0.8;
? ?? += mouseDown ? 0.1 : 0.05;
? Paths.forEach(?? (??, i) {
? ? path.root.forEach(?? (r, j) {
? ? ? if (j % ?? == 1) {
? ? ? ? var move = Math.sin(time + r.delay) * ?? * r.casual;
? ? ? ? r.y -= ?? / 2 - ??;
? ? ? }
? ? ? if (j + 1% ?? == 0) {
? ? ? ? var move = Math.sin(time + r.delay) * ?? * r.casual;
? ? ? ? r.x += ?? / 2 - ?? / 10;
? ? ? }
? ? });
? ? path.draw();
? });
? requestAnimationFrame(???);
}
???();
/* ????? */
'mousedown touchstart'.split(' ').forEach(?? (e) {
? document.addEventListener(e, function () {
? ? mouseDown = true;
? });
});
/* MOUSEUP */
'mouseup mouseleave touchend'.split(' ').forEach(function (e) {
? document.addEventListener(e, function () {
? ? mouseDown = ??;
? });
});
/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(?? (e) {
? document.addEventListener(e, ?? (e) {
? ? mouseY = e.clientY || e.touches[0].clientY;
? });
});
/* ??? GUI */
var gui = ?? datgui() {
? var gui = ??? dat.GUI();
? // dat.GUI.toggleHide();
? gui.closed = true;
? gui.add(??, "amplitudeX", 40, 200).step(20).onChange(?? (newValue) {
? ? ???();
? });
? gui.add(??, "amplitudeY", 0, 100).step(1).onChange(function (newValue) {
? ? ???();
? });
? gui.add(??, "??", 5, 50).step(1).onChange(?? (newValue) {
? ? ???();
? });
? gui.addColor(??, "startColor").onChange(?? (newValue) {
? ? ???();
? ? document.querySelector('h1').innerHTML = '?? ??? ?';
? });
gui.addColor(??, "endColor").onChange(?? (newValue) {
???();
document.querySelector('h1').innerHTML = '?? ??? ?';
});
GUI ??;
}();
</??>
</html>
????? ??? ??? ? ?? ?? HTML5 ??? ????? ?? ?????. ? ??? ??? ??? ??? ???? ????? ??, ?? ? ?? ??? ??? ? ????.
? ???? ?? ???? ???? ????? ?? ???? ????? ????????. ?????? ???? ?? ??????! ? ???? ?? ???? ?? ?????? ?????. ??? ???? ???? ??? ????. ??? ??? ?? ??? ?? ??? ???? ????! ??? ?? ?? ??? ???? ????? ????. ???: admin@php.cn
?? ??
CSGO ?? ?? ????? ?? HD ?? ?? CSGO ??? ?? ?? ????? ?? ??
04 Jun 2025
CSGO (Coun ?? ??? ??? ??? ?? ?? ???? ?? ????? ??? ? ??????. ?? ??? ?? ???? ?? ???? ?? ?? ????, ???? ??? ?? ??? ??? ??? ? ????. ? ??? CSGO ?? ?? ?????? ?? ???? ??? ??? ???? ??? ??? ???? ??? ? ??????.
ASUS? ?? ?? ??? ?????? ??? ???? ?????
13 Mar 2025
ASUS ?? ?? ??? ??? ?? : ?? ?? ?? ??? ??? ASUS? ?? ??? ? ???? ?? ?????? ?? ?? ???? ???? ?? ??? ????? ?? ??? ?? ??? ?????. ??? ? ??
?? ?? ???? ????? ??? ???? ?? CSS? Shape Outside ??? ???? ??? ??????
05 Apr 2025
? ????? ?? ?? ???? ????? ??? ???? ??? ??? ?? ????? ?? ??? ????? ??? ???? ??? ?????? ? ?? ...
10 JQuery Cool ?? ?? ????
01 Mar 2025
? ??? ??? ??? ????? ?? 10 Cool JQuery ?? ?? ?? ????! ??? ?? jQuery Navigation ?? ????? ????? ?? 10 ?? ??? JQuery ?? ?? ????? ?????. ????! ?? ?? ? : -10 ??? jQuery Navigation MENUS -15 ??? jQuery Navigation MENUS ??? ??? ??? ???? ?????? ? ????? ????? ?? ?? ????? ??? ??? ?? ??? ?? ? ????. ?? ?? ?? 2. jQuery ??? ??-Submenu??? FX CSS ?? 100% CSS ??, jQuery? ???? ?? ??. JavaScript ? ???? ?? ??? ??????. ??? ????, ???? ??? ?????
CSS ?? ??? ???? ??? ???? ??? ????? ?? ??? ??? ???? ??? ??????
05 Apr 2025
CSS ?? ?? ? ?? ?? ??? ??? CSS? ???? ?? ?? ??? ??? ??? ???? ?? ???? ?? ???? ??? ???? ??? ?? ?? ? ???? ...
Rimworld Odyssey ?? ???
14 Jul 2025
Andrew Hammelbrowse? ?? ??? Rimworld? ???? Rimworld Odyssey DLC? ??? ??, ?? ?? ? ??? ? ??? ?? ??? ?? ??? ?????. ???? ??? ? ????. ???? ?? ???????.
??? ? ??? ??? ?? ??
21 Mar 2025
Avowed 's Best Sight Bows : ??? ?? ???. ???? ?? ??? Avowed? ?, ?? ??? ??? ?? ?????. ??? ??? ??, ? ?? ??? ? ?? ??? ?????. ? ???? ?? UN? ??? ?????
DeepSeek?? ???? ??? ?? - DeepSeek?? ???? ??? ??
12 Mar 2025
Deepseek ??? ?? ??? ????? ?? ???? ?? ?? ? ????! ? ??? ?? ?? ???? ?? ??? ????? Deepseek ??? ?? ??? ????? ????? ???? ??? ? ????. ?? DeepSeek ?????? ?? ?? ?????? ?? ????? ??????. ?? ?? ?? DeepSeek, "??"???? "?? ??"??? ???? ???, ??? ? ??? ??? ??????. ??? ??? ??? ?? ???? ?? ?? ??? ???? ??? ??? ???? ?? ??? ???? ??? ??? ???? ????? ????. ?? ?? ? ??? DeepSeek ?? ?? ?? ?????? ???? ???? ??? ??? ???? ??? ???? ??? ???? ??? ??????.
Douyin? AI ??? ??????
29 Nov 2024
Douyin? ??? ??, ??? ?? ??, ?? ??, ?? ?? ? ?? ?? ??? ??? ???? ???? ???? ?? ??, ?? ? ??? ? ??? ?? ??? ?? AI ??? ?????. ??? ??, ??? ?? ? ?? ?? ??? ??? ??? ?? ???? ??????. ?? ??? ?? ???? ??? ?????.
??? ??
HTML5 Canvas ?? ???? ????? ?? ??
HTML5 Canvas ?? ???? ????? ?? ??? ?????? ?? ?? ??? ? ? ?? ??? ????????.
H5 ?? ?? ?? ?? ??
HTML5 Mobile Panda? ?? ?? ?? ?? ?????. ?? ??: ??? ?? ?? ?? ???? ??? ???? ????? ?????. ?? ??? ??? ?????.
HTML5 ???? ?? ?? ????? ?? ??
svg? ???? ??????? ??? ?? ??? ?? ?????? ??? ?? ?????? ????? ?????.
H5 3D ?? ? ?? ?? ??
HTML5 ?? 3D ? ?? ??? ?? ?? ????. ?? ??: ?? ?? ?? ????, ?? ?? ?? ?? ??? ???? ???? ?? ????? ????? ?????. ???? ???? ?? ??? ?? ???????.