文字炫酷祝福 含魔法代码
效果下图：（可自定义显示内容）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;background: #79a8ae;color: #666;font-size: 16px;line-height: 1.5em;overflow: hidden;}h1 {color: #111;margin: 0 0 12px 0;font-size: 24px;line-height: 1.5em;}p {margin: 0 0 10x 0;}a {color: #888;text-decoration: none;border-bottom: 1px solid #ccc;}a:hover {border-bottom-color: #888;}body,.overlay {-webkit-perspective: 1000;-webkit-perspective-origin-y: 25%;}.body--ready {/* Ideasbackground: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);*/background-color: #000;/* background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(2, 82, 255) 120%); *//* background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); */}.body--ready .overlay {-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);}.ui {position: absolute;left: 50%;bottom: 5%;width: 300px;margin-left: -150px;}.ui-input {width: 100%;height: 50px;background: none;font-size: 24px;font-weight: bold;color: #fff;text-align: center;border: none;border-bottom: 2px solid white;}.ui-input:focus {outline: none;border: none;border-bottom: 2px solid white;}.ui-return {display: none;position: absolute;top: 20px;right: 0;padding: 3px 2px 0 2px;font-size: 10px;line-height: 10px;color: #fff;border: 1px solid #fff;}.ui--enter .ui-return {display: block;}.ui--wide {width: 76%;margin-left: 12%;left: 0;}.ui--wide .ui-return {right: -20px;}.help {position: absolute;top: 40px;right: 40px;width: 25px;height: 25px;text-align: center;font-size: 13px;line-height: 27px;font-weight: bold;cursor: pointer;background: #fff;color: #79a8ae;opacity: .9;-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);}.help:hover {opacity: 1;}.overlay {position: absolute;top: 50%;left: 50%;width: 550px;height: 490px;margin: -260px 0 0 -275px;opacity: 0;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg);-o-transform: rotateY(90deg);transform: rotateY(90deg);}.overlay--visible {opacity: 1;-webkit-transform: rotateY(0);-moz-transform: rotateY(0);-ms-transform: rotateY(0);-o-transform: rotateY(0);transform: rotateY(0);}.ui-share,.ui-details {opacity: .9;background: #fff;z-index: 2;}.ui-details-content,.ui-share-content {padding: 100px 50px;}.commands {margin: 0;padding: 0;list-style: none;cursor: pointer;}.commands-item {font-size: 12px;line-height: 22px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;padding: 20px;background: #fff;margin-top: 1px;color: #333;opacity: .9;-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);}.commands-item--gap {margin-top: 9px;}.commands-item:hover {opacity: 1;}.commands-item:hover .commands-item-action {background: #333;}.commands-item a {display: inline-block;}.commands-item-mode {display: inline-block;margin-left: 3px;font-style: italic;color: #ccc;}.commands-item-title {display: inline-block;width: 150px;}.commands-item-info {display: inline-block;width: 300px;font-size: 14px;text-transform: none;letter-spacing: 0;font-weight: normal;color: #aaa;}.commands-item-action {display: inline-block;float: right;margin-top: 3px;text-transform: uppercase;font-size: 10px;line-height: 10px;color: #fff;background: #90c9d1;padding: 5px 10px 4px 10px;border-radius: 3px;}.commands-item:first-child {margin-top: 0;}.twitter-share {position: absolute;top: 4px;right: 20px;}.tabs-labels {margin-bottom: 9px;}.tabs-label {display: inline-block;background: #fff;padding: 10px 20px;font-size: 12px;line-height: 22px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;color: #333;opacity: .5;cursor: pointer;margin-right: 2px;-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);}.tabs-label:hover {opacity: .9;}.tabs-label--active {opacity: .9;}.tabs-panel {display: none;}.tabs-panel--active {display: block;}.tab-panel {position: absolute;top: 0;left: 0;width: 100%;}.touch .ui-input {display: none;}</style>
</head>
<body><canvas class="canvas"></canvas><div class="help" style="display: none;">?</div> <div class="ui" style="display: none;"><input class="ui-input" type="text" /><span class="ui-return">↵</span>
</div><div class="overlay"><div class="tabs"><div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div><div class="tabs-panels"><ul class="tabs-panel commands"><li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span> |<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li></ul><div class="tabs-panel ui-details"><div class="ui-details-content"><h1>Shape Shifter</h1><p>An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/><a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.</p><br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p></div></div><div class="tabs-panel ui-share"><div class="ui-share-content"><h1>Sharing</h1><p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p><p><a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/><a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a></p></div></div></div></div>
</div>
</body>
<script>var S = {init: function () {var action = window.location.href,i = action.indexOf('?a=');S.Drawing.init('.canvas');document.body.classList.add('body--ready');if (i !== -1) {S.UI.simulate(decodeURI(action).substring(i + 3));} else {S.UI.simulate('|#countdown 3|祝小朋友们|儿童节快乐');}S.Drawing.loop(function () {S.Shape.render();});}
};S.Drawing = (function () {var canvas,context,renderFnrequestFrame = window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};return {init: function (el) {canvas = document.querySelector(el);context = canvas.getContext('2d');this.adjustCanvas();window.addEventListener('resize', function (e) {S.Drawing.adjustCanvas();});},loop: function (fn) {renderFn = !renderFn ? fn : renderFn;this.clearFrame();renderFn();requestFrame.call(window, this.loop.bind(this));},adjustCanvas: function () {canvas.width = window.innerWidth;canvas.height = window.innerHeight;},clearFrame: function () {context.clearRect(0, 0, canvas.width, canvas.height);},getArea: function () {return { w: canvas.width, h: canvas.height };},drawCircle: function (p, c) {context.fillStyle = c.render();context.beginPath();context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);context.closePath();context.fill();}}
}());S.UI = (function () {var input = document.querySelector('.ui-input'),ui = document.querySelector('.ui'),help = document.querySelector('.help'),commands = document.querySelector('.commands'),overlay = document.querySelector('.overlay'),canvas = document.querySelector('.canvas'),interval,isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),currentAction,resizeTimer,time,maxShapeSize = 10,firstAction = true,sequence = [],cmd = '#';function formatTime(date) {var h = date.getHours(),m = date.getMinutes(),m = m < 10 ? '0' + m : m;return h + ':' + m;}function getValue(value) {return value && value.split(' ')[1];}function getAction(value) {value = value && value.split(' ')[0];return value && value[0] === cmd && value.substring(1);}function timedAction(fn, delay, max, reverse) {clearInterval(interval);currentAction = reverse ? max : 1;fn(currentAction);if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {interval = setInterval(function () {currentAction = reverse ? currentAction - 1 : currentAction + 1;fn(currentAction);if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {clearInterval(interval);}}, delay);}}function reset(destroy) {clearInterval(interval);sequence = [];time = null;destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));}function performAction(value) {var action,value,current;overlay.classList.remove('overlay--visible');sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));input.value = '';checkInputWidth();timedAction(function (index) {current = sequence.shift();action = getAction(current);value = getValue(current);switch (action) {case 'countdown':value = parseInt(value) || 10;value = value > 0 ? value : 10;timedAction(function (index) {if (index === 0) {if (sequence.length === 0) {S.Shape.switchShape(S.ShapeBuilder.letter(''));} else {performAction(sequence);}} else {S.Shape.switchShape(S.ShapeBuilder.letter(index), true);}}, 1000, value, true);break;case 'rectangle':value = value && value.split('x');value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));break;case 'circle':value = parseInt(value) || maxShapeSize;value = Math.min(value, maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case 'time':var t = formatTime(new Date());if (sequence.length > 0) {S.Shape.switchShape(S.ShapeBuilder.letter(t));} else {timedAction(function () {t = formatTime(new Date());if (t !== time) {time = t;S.Shape.switchShape(S.ShapeBuilder.letter(time));}}, 1000);}break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));}}, 2000, sequence.length);}function checkInputWidth(e) {if (input.value.length > 18) {ui.classList.add('ui--wide');} else {ui.classList.remove('ui--wide');}if (firstAction && input.value.length > 0) {ui.classList.add('ui--enter');} else {ui.classList.remove('ui--enter');}}function bindEvents() {document.body.addEventListener('keydown', function (e) {input.focus();if (e.keyCode === 13) {firstAction = false;reset();performAction(input.value);}});input.addEventListener('input', checkInputWidth);input.addEventListener('change', checkInputWidth);input.addEventListener('focus', checkInputWidth);help.addEventListener('click', function (e) {overlay.classList.toggle('overlay--visible');overlay.classList.contains('overlay--visible') && reset(true);});commands.addEventListener('click', function (e) {var el,info,demo,tab,active,url;if (e.target.classList.contains('commands-item')) {el = e.target;} else {el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;}info = el && el.querySelector('.commands-item-info');demo = el && info.getAttribute('data-demo');url = el && info.getAttribute('data-url');if (info) {overlay.classList.remove('overlay--visible');if (demo) {input.value = demo;if (isTouch) {reset();performAction(input.value);} else {input.focus();}} else if (url) {//window.location = url;}}});canvas.addEventListener('click', function (e) {overlay.classList.remove('overlay--visible');});}function init() {bindEvents();input.focus();isTouch && document.body.classList.add('touch');}// Initinit();return {simulate: function (action) {performAction(action);}}
}());S.UI.Tabs = (function () {var tabs = document.querySelector('.tabs'),labels = document.querySelector('.tabs-labels'),triggers = document.querySelectorAll('.tabs-label'),panels = document.querySelectorAll('.tabs-panel');function activate(i) {triggers[i].classList.add('tabs-label--active');panels[i].classList.add('tabs-panel--active');}function bindEvents() {labels.addEventListener('click', function (e) {var el = e.target,index;if (el.classList.contains('tabs-label')) {for (var t = 0; t < triggers.length; t++) {triggers[t].classList.remove('tabs-label--active');panels[t].classList.remove('tabs-panel--active');if (el === triggers[t]) {index = t;}}activate(index);}});}function init() {activate(0);bindEvents();}// Initinit();
}());S.Point = function (args) {this.x = args.x;this.y = args.y;this.z = args.z;this.a = args.a;this.h = args.h;
};S.Color = function (r, g, b, a) {this.r = r;this.g = g;this.b = b;this.a = a;
};S.Color.prototype = {render: function () {return 'rgba(' + this.r + ',' + + this.g + ',' + this.b + ',' + this.a + ')';}
};S.Dot = function (x, y) {this.p = new S.Point({x: x,y: y,z: 5,a: 1,h: 0});this.e = 0.07;this.s = true;this.c = new S.Color(Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), this.p.a);this.t = this.clone();this.q = [];
};S.Dot.prototype = {clone: function () {return new S.Point({x: this.x,y: this.y,z: this.z,a: this.a,h: this.h});},_draw: function () {this.c.a = this.p.a;S.Drawing.drawCircle(this.p, this.c);},_moveTowards: function (n) {var details = this.distanceTo(n, true),dx = details[0],dy = details[1],d = details[2],e = this.e * d;if (this.p.h === -1) {this.p.x = n.x;this.p.y = n.y;return true;}if (d > 1) {this.p.x -= ((dx / d) * e);this.p.y -= ((dy / d) * e);} else {if (this.p.h > 0) {this.p.h--;} else {return true;}}return false;},_update: function () {if (this._moveTowards(this.t)) {var p = this.q.shift();if (p) {this.t.x = p.x || this.p.x;this.t.y = p.y || this.p.y;this.t.z = p.z || this.p.z;this.t.a = p.a || this.p.a;this.p.h = p.h || 0;} else {if (this.s) {this.p.x -= Math.sin(Math.random() * 3.142);this.p.y -= Math.sin(Math.random() * 3.142);} else {this.move(new S.Point({x: this.p.x + (Math.random() * 50) - 25,y: this.p.y + (Math.random() * 50) - 25,}));}}}d = this.p.a - this.t.a;this.p.a = Math.max(0.1, this.p.a - (d * 0.05));d = this.p.z - this.t.z;this.p.z = Math.max(1, this.p.z - (d * 0.05));},distanceTo: function (n, details) {var dx = this.p.x - n.x,dy = this.p.y - n.y,d = Math.sqrt(dx * dx + dy * dy);return details ? [dx, dy, d] : d;},move: function (p, avoidStatic) {if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {this.q.push(p);}},render: function () {this._update();this._draw();}
}S.ShapeBuilder = (function () {var gap = 13,shapeCanvas = document.createElement('canvas'),shapeContext = shapeCanvas.getContext('2d'),fontSize = 500,fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';function fit() {shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;shapeContext.fillStyle = 'red';shapeContext.textBaseline = 'middle';shapeContext.textAlign = 'center';}function processCanvas() {var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;dots = [],pixels,x = 0,y = 0,fx = shapeCanvas.width,fy = shapeCanvas.height,w = 0,h = 0;for (var p = 0; p < pixels.length; p += (4 * gap)) {if (pixels[p + 3] > 0) {dots.push(new S.Point({x: x,y: y}));w = x > w ? x : w;h = y > h ? y : h;fx = x < fx ? x : fx;fy = y < fy ? y : fy;}x += gap;if (x >= shapeCanvas.width) {x = 0;y += gap;p += gap * 4 * shapeCanvas.width;}}return { dots: dots, w: w + fx, h: h + fy };}function setFontSize(s) {shapeContext.font = 'bold ' + s + 'px ' + fontFamily;}function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);}function init() {fit();window.addEventListener('resize', fit);}// Initinit();return {imageFile: function (url, callback) {var image = new Image(),a = S.Drawing.getArea();image.onload = function () {shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);callback(processCanvas());};image.onerror = function () {callback(S.ShapeBuilder.letter('What?'));}image.src = url;},circle: function (d) {var r = Math.max(0, d) / 2;shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.beginPath();shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);shapeContext.fill();shapeContext.closePath();return processCanvas();},letter: function (l) {var s = 0;setFontSize(fontSize);s = Math.min(fontSize,(shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);setFontSize(s);shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);return processCanvas();},rectangle: function (w, h) {var dots = [],width = gap * w,height = gap * h;for (var y = 0; y < height; y += gap) {for (var x = 0; x < width; x += gap) {dots.push(new S.Point({x: x,y: y,}));}}return { dots: dots, w: width, h: height };}};
}());S.Shape = (function () {var dots = [],width = 0,height = 0,cx = 0,cy = 0;function compensate() {var a = S.Drawing.getArea();cx = a.w / 2 - width / 2;cy = a.h / 2 - height / 2;}return {shuffleIdle: function () {var a = S.Drawing.getArea();for (var d = 0; d < dots.length; d++) {if (!dots[d].s) {dots[d].move({x: Math.random() * a.w,y: Math.random() * a.h});}}},switchShape: function (n, fast) {var size,a = S.Drawing.getArea();width = n.w;height = n.h;compensate();if (n.dots.length > dots.length) {size = n.dots.length - dots.length;for (var d = 1; d <= size; d++) {dots.push(new S.Dot(a.w / 2, a.h / 2));}}var d = 0,i = 0;while (n.dots.length > 0) {i = Math.floor(Math.random() * n.dots.length);dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);if (dots[d].s) {dots[d].move(new S.Point({z: Math.random() * 20 + 10,a: Math.random(),h: 18}));} else {dots[d].move(new S.Point({z: Math.random() * 5 + 5,h: fast ? 18 : 30}));}dots[d].s = true;dots[d].move(new S.Point({x: n.dots[i].x + cx,y: n.dots[i].y + cy,a: 1,z: 5,h: 0}));n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));d++;}for (var i = d; i < dots.length; i++) {if (dots[i].s) {dots[i].move(new S.Point({z: Math.random() * 20 + 10,a: Math.random(),h: 20}));dots[i].s = false;dots[i].e = 0.04;dots[i].move(new S.Point({ x: Math.random() * a.w,y: Math.random() * a.h,a: 0.3, //.4z: Math.random() * 4,h: 0}));}}},render: function () {for (var d = 0; d < dots.length; d++) {dots[d].render();}}}
}());S.init();</script>
</html>自定义内容
可根据自身喜好更改内容
总结
以上就是今天的全部内容，赶紧上手试试吧。
如果觉得有用欢迎点赞，关注
有问题留言我！！
相关文章：
文字炫酷祝福 含魔法代码
效果下图：（可自定义显示内容） 代码如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...
docker容器中连接宿主机mysql数据库
最近要在docker中使用mysql数据库，首先考虑在ubuntu的镜像中安装mysql，这样的脚本和数据库都在容器中，直接访问localhost：3306，脚本很简单，如下： import pymysql# 建立数据库连接 db pymysql.…...
Leetcode 41. 缺失的第一个正数
41. 缺失的第一个正数 - 力扣（LeetCode） class Solution {/**2024.6.18首先把小于等于0和大于n的全部标记成n1，这些数据不会是答案；把出现的数字标记为负数，比如数字3，那就是nums[2]-nums[2];下次从头遍历…...
MyBatis 自定义映射 ResultMap：字段与属性的映射详解
在 MyBatis 框架中，ResultMap是一个非常强大的功能，它允许我们自定义SQL查询结果与Java对象之间的映射关系。特别是在数据库字段名和Java对象属性名不一致时，ResultMap能够帮助我们精确地映射数据。 ResultMap 的基本使用 若字段名和实体类…...
找单身狗2
找单身狗2 之前遇到类似的题目的思路： 首先写出这些数的二进制形式： 核心原理 接下来的问题是怎么把5和6分开来？ 这里是最后一位进行比较，按位异或是相同为0，相异为1，最后一位从上图看出是1，说…...
element-ui将组件默认语言改为中文
在main.js中加入以下代码即可 // 引入 Element Plus 及其样式 import ElementPlus from element-plus import element-plus/dist/index.css// 引入中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn// 使用 Element Plus 并设置语言为中文 app.use(ElementPlus,…...
SuperMap iClient3D 11i(2023) SP1 for Cesium 调整
SuperMap iClient3D 11i(2023) SP1 for Cesium 最新版本 下载地址 SuperMap技术资源中心|为您提供全面的在线技术服务 每一次版本升级，都要对代码进行修改调整，都是为了解决功能需求。当然，也为产品做了小白鼠测试，发现bug，优化功能。 由于前端开发使用的是dojo框架，类…...
保姆级小白就业人工智能（视频+源码+笔记）
🍅我是小宋， Java学习AI，记录学习之旅。关注我，带你轻松过面试。提升简历亮点（14个demo） 🍅我的java面试合集已有12W 浏览量。🌏号：tutou123com。拉你进专属群。 ⭐⭐你的…...
微信小程序，分享和反馈功能
<button type"primary" open-type"share">分享</button> <button type"primary" open-type"feedback">反馈</button>...
数据安全未来之路，天空卫士荣誉领榜《中国数据安全50强(2024)》
《中国数据安全50强（2024）》 数世咨询首份《中国数据安全50强（2024）》报告发布。天空卫士凭借其卓越的技术创新、市场领导力、业务收入能力和企业发展能力，在众多竞争者中脱颖而出，荣登50强榜单࿰…...
CAD二次开发（10）-单行文字的添加+图形修改
1. 单行文字的添加 第一步： 首先在CAD中新增中文样式 输入ST命令： 第二步：代码开发 /// <summary>/// 添加文本信息/// </summary>[CommandMethod("AddText")]public void AddText(){var doc Application.DocumentM…...
【SpringBoot集成Spring Security】
一、前言 Spring Security 和 Apache Shiro 都是安全框架，为Java应用程序提供身份认证和授权。 二者区别 Spring Security：重量级安全框架Apache Shiro：轻量级安全框架 关于shiro的权限认证与授权可参考小编的另外一篇文章 ： …...
docker部署dm数据库
官方文档参考 官网地址：https://eco.dameng.com/document/dm/zh-cn/start/dm-install-docker.html 下载镜像地址 docker部署 1、加载镜像 docker load -i dm8_20240613_x86_rh6_64_rq_ent_8.1.3.140_pack5.tar使用docker images，查看镜像和镜像标签…...
Shell中执行.sh文件的常见方式
在Shell中执行.sh文件有几种常见的方式，具体取决于你希望如何执行这个脚本文件。以下是一些常用的方法： 直接运行： ./script.sh 这是最简单的方式。在当前Shell会话中执行脚本文件。 使用bash命令执行： bash script.sh 明确使用b…...
超分辨率重建——2022冠军RLFN网络推理测试（详细图文教程）
💪 专业从事且热爱图像处理，图像处理专栏更新如下👇： 📝《图像去噪》 📝《超分辨率重建》 📝《语义分割》 📝《风格迁移》 📝《目标检测》 📝《暗光增强》 &a…...
国际荐酒师香港协会受邀参加2024年美国独立日庆祝活动
国际荐酒师（香港）协会受邀参加2024年美国独立日庆祝活动促进世界酒中国菜的全球化发展 2024年6月18日，国际荐酒师（香港）协会大中华区驻广州办事处荣幸地接受了美国驻广州总领事馆 Nicholas Burns大使和Lisa Heller总领…...
(微服务实战)聚合支付系统商户线上聚合收银台接口设计
1 概述 聚合支付收款分为线上和线下业务场景，本文中的商户收银台接口设计主要是指线上业务场景，线下业务场景聚合收款方式后续会进行单独设计和分析。 主流的线上支付渠道有微信支付，支付宝支付，云闪付。这三种支付渠道都有各自…...
【漏洞复现】CRMEB开源电商系统 /api/products SQL注入漏洞(CVE-2024-36837)
0x01 产品简介 CRMEB开源电商系统是一款由西安众邦网络科技有限公司打造的全栈式电商解决方案，旨在为开发者和商家提供高性能、智能化的电商平台服务。该系统集成了CRM(客户关系管理)、ERP(企业资源规划)和EB(电子商务)的功能，通过深度结合这些功能&…...
摄像头图像矫正的表格生成方法
1.设置单元格高宽 点击表格左上角 的 小三角 列宽: HOME -> Rows and Columns -> Column Width 5 CM 行高: HOME -> Rows and Columns -> Row Height 5 CM 2.设置 条件格式 HOME -> Conditional Formatting-> Manager Rules 点击 左上方 New Rule…...
【Arc gis】Arc gis出现ERROR 999999问题的解决办法
地址：ArcGIS中ERROR 999999报错Configuration RasterCommander ImageServer can not be started解决_投影栅格失败error999999-CSDN博客...
优化 Flutter 应用开发：探索 ViewModel 的威力
介绍 1.1 什么是 ViewModel？ ViewModel，顾名思义，就是视图的模型。在 Flutter 中，ViewModel 是一种用于管理视图状态和业务逻辑的重要概念。它承载了应用程序的核心功能，像是一个精心设计的控制中心，负责…...
Android开发系列（四）Jetpack Compose之Button
在Jetpack Compose中，Button是一个常用的用户界面组件，用于执行某些操作或触发某些事件。Button控件是可触摸的，并且通常会显示一个文本或图标来表示其功能。 要在Jetpack Compose中创建一个Button，可以使用Button()函数…...
Java17 --- RabbitMQ之插件使用
目录 一、Federation插件 1.1、运行两个rabbitmq实例 1.2、启用插件 1.3、在下游端点添加上游端点 1.4、创建策略 1.6、测试 二、联邦队列 2.1、创建策略 2.2、创建交换机与队列 2.2.1、创建52000的队列与交换机 2.2.2、创建62000的队列 三、Shovel 3.1、启…...
6.18总结
省赛排位赛2： 省赛排名赛2 - Virtual Judge 思路： 设两个方程直接解出来就行 代码： #include<bits/stdc.h> using namespace std; int n, m; int main() {int n, m;int ans1, ans2;cin >> n >> m;ans1 n - (-3 sqr…...
【ARM Cache 及 MMU 系列文章 1.4 -- 如何判断 L3 Cache 是否实现?】
请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Cluster Configuration Register代码实现什么是Single-Threaded Core?什么是PE（Processor Execution units）?Single-Threaded Core与PE的关系对比多线程（Multithreading）Cluster…...
打印mybatis的sql日志
1、application.xml: logging.level.com.xxx.xxx.daodebug2、log4j2.xml: <Logger name"com.xxx.xxx.dao" level"debug" additivity"true" />...
QT day4(对话框 事件机制)
1：思维导图 2： #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->setupUi(this);//去除头部this->setWindowFlag(Qt::Frameles…...
序列化与反序列化漏洞实例
实验环境： 本次的序列化与反序列化漏洞为2021年强网杯上的一道比赛题目，我使用phpstudy集成环境将其测试环境搭建在了本地，如下。涉及的几个页面php为： index.php function.php myclass.php index.php : <?php // inde…...
6、while循环 - 习题解析
目录 解析部分：分支练习1244. 请问一个正整数能够整除几次2问题描述解题思路代码实现代码解析 1062. 求落地次数问题描述解题思路代码实现代码解析 1254. 求车速问题描述解题思路代码实现代码解析 1261. 韩信点兵问题描述解题思路代码实现代码解析 解析部分…...
ReentrantLock可重入锁
可重⼊锁，这个锁可以被线程多次重复进⼊进⾏获取操作。 ReentantLock继承接⼝Lock并实现了接⼝中定义的⽅法，除了能完成synchronized所能完成的所有⼯作 外，还提供了诸如可响应中断锁、可轮询锁请求、定时锁等避免多线程死锁的⽅法。 在并发量…...
wordpress bbs插件/深圳招聘网络推广
1. 前言：前几篇文章分享了下 MyBatis 拦截器的相关知识，这里再分享下自己项目中遇到的一个问题，然后通过自定义的拦截器快速的解决了问题。2. 项目用到的技术：SpringBoot，MyBatis.....3. 业务需求：最近项目…...
wordpress资源站源码/友情链接样式
最近腾讯文档上线了，什么是腾讯文档呢？腾讯文档是一款可多人协作的在线文档，可同时编辑Word和Excel文档，云端实时保存。电脑腾讯文档功能受到很多用户喜爱，但是大部分用户不知道腾讯文档的具体使用方法和功能&…...
大连集团网站建设/关键词排名批量查询
2019独角兽企业重金招聘Python工程师标准>>> 在lvmcache初步分析 - 1 中，我们主要从DM层框架的角度，简单看了下dmcache是怎样被放进这个通用框架的。这一篇，将尝试分析dmcache的设计。 谈设计前，我们需要清楚dmcache要…...
做网站软件frontpage/广州白云区疫情实时动态
1.使用QT自带的布局类能去掉控件的间隙吗？ 下面是QT的设计师界面，我在一个QWidget上面放了4个按钮，并且把这4个按钮放到了一个水平布局内，大家看右下角的参数，我已经全部设置为0，但是从界面上依然能直观低…...
网站如何做404页面/域名备案查询站长工具
这里有一些benchmarks用于各种操作和文件系统供您参考. (在繁忙的系统上,你当然会得到不同的结果,但希望这会让你知道会发生什么).如果我在你的椅子上,我会尝试获得该场景的基线基准：>确定操作将在与其他所有设备隔离的裸硬件上花费多长时间(是的,它应该花费很多…...
电子商务网站购物流程图/营销软件网站
顾名思义，AChartEngine是一个图表库，可以在Android应用程序中使用。 它支持1.6及更高版本的所有Android SDK版本。 1.6版仅提供基于平移和按钮的缩放，而2.1版和更高版本增加了对捏缩放的支持，因为该功能已在Android SDK 2.x和更高…...