蒲公英

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #3e52eb;
  overflow: hidden;
}

.seed-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
}

#s {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.center {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.dandelion {
  background: #305b14;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  height: 100%;
  margin: 0 auto;
  width: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#r {
  -webkit-filter: contrast(75%) brightness(200%);
          filter: contrast(75%) brightness(200%);
}

.seed {
  background: #fdfda0;
  border-radius: 100%;
  display: block;
  -webkit-filter: blur(10px) brightness(150%);
          filter: blur(10px) brightness(150%);
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 300px;
  z-index: 1;
}

JavaScript

var blow,
	r_canvas,
	r_ctx,
	r_height,
	b,
	b_seed = {
		maxSeedCount: 500,
		seedCount: 0,
		seedFreq: 1,
		seeds: []
	},
	r_seed = {
		maxSeedCount: 500,
		seedCount: 0,
		seedFreq: 5,
		seeds: []
	},
	r_makeSeed = false,
	r_width,
	r_originx,
	r_originy,
	s_canvas,
	s_ctx,
	s_maxSeedCount = 5,
	s_seedCount = 0,
	s_seeds = [],
	s_height,
	s_width,
	i,
	j = 0,
	seed,
	SeedType = {
		BLOW: 0,
		RANDOM: 1,
		STATIC: 2
	},
	seed_h,
	seed_w,
	pi = Math.PI,
	twoPi = pi * 2,
	halfPi = pi / 2,
	mouseMove = false,
	b_velocity = 1;

function clear(ctx, width, height) {
	ctx.clearRect(0, 0, width, height);
}

function rand(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;
}

function randInt(min, max) {
	return Math.random() * (max - min) + min;
}

function negRand(min, max) {
	return Math.floor(Math.random() * max - min);
}

function spawnSeed(type, seed) {
	if (seed.seedCount < seed.maxSeedCount) {
		seed.seeds.push(new Seed(type));
		seed.seedCount++;
	} else {
		r_makeSeed = false;
	}
}

function main() {
	r_width = 1800;
	r_height = 1800;
	r_canvas = document.getElementById("r");
	r_ctx = r_canvas.getContext("2d");
	r_canvas.width = r_width;
	r_canvas.height = r_height;
	r_originx = r_width / 2;
	r_originy = r_height / 2;

/*s_width = 300;
	s_height = 300;
	s_canvas = document.getElementById( 'c' ); 
  s_ctx = s_canvas.getContext( '2d' );
  s_canvas.width = s_width ;
  s_canvas.height = s_height ;*/
	document.querySelector("#r").addEventListener("mousemove", function(e) {
		mouseMove = true;
		var cRect = document.querySelector("#r").getBoundingClientRect();
		r_originx = e.clientX - cRect.left;
		r_originy = e.clientY - cRect.top;
	});
	document.querySelector("#r").addEventListener("mousedown", function(e) {
		b_velocity = 0.1;
	})
	document.querySelector("#r").addEventListener("mouseup", function(e) {
		b_velocity = 1;
	});
	loop();
}

var Seed = function(type) {
	this.const(type);
};

Seed.prototype.const = function(type) {
	if (type == SeedType.BLOW) {
		this.alpha = 0;
		this.ox = r_originx + rand(-1, 1);
		this.oy = r_originy + rand(-1, 1);
		this.mx = r_width - 100 || 0;
		this.my = r_height - 100 || 0;
		this.coord = {
			x: this.ox,
			y: this.oy
		};
		this.radius = randInt(0, 0.5);
		this.radiusGrow = 0.05;
		this.maxRadius = 20;
		this.fadeIn = true;
		this.fadeFreqIn = 0.05;
		this.fadeFreqOut = 0.0035;
		this.vx = randInt(-1, 1);
		this.vy = randInt(-1, 1);
		this.velocity = {
			x: this.vx / b_velocity,
			y: this.vy / b_velocity
		};
	} else if (type == SeedType.RANDOM) {
		this.alpha = 0;
		this.ox = r_width / 2 + rand(-1, 1);
		this.oy = r_height / 2 + rand(-1, 1);
		this.mx = r_width - 100 || 0;
		this.my = r_height - 100 || 0;
		this.coord = {
			x: this.ox,
			y: this.oy
		};
		this.radius = rand(1, 15);
		this.maxRadius = 20;
		this.fadeIn = true;
		this.fadeFreqIn = 0.05;
		this.fadeFreqOut = 0.0035;
		this.vx = randInt(-1, 1);
		this.vy = randInt(-1, 1);
		this.velocity = {
			x: this.vx,
			y: this.vy
		};
	} else if (type == SeedType.STATIC) {
		this.ox = s_width / 2 + rand(-20, 40) + 50;
		this.oy = s_height / 2 + rand(50, -200) + 50;
		this.coord = {
			x: s_width / 2,
			y: s_height / 2
		};
		this.radius = 50;
		this.vx = 0.5;
		this.vy = 0.5;
		this.velocity = {
			x: this.ox + Math.cos(twoPi) * this.radius,
			y: this.oy + Math.sin(twoPi) * this.radius
		};
	}
};

Seed.prototype.render = function(ctx, s) {
	ctx.beginPath();
	ctx.arc(this.coord.x, this.coord.y, this.radius, 0, twoPi);
	ctx.shadowBlur = 10;
	ctx.shadowColor = "hsla(60, 96%, 81%, 1.0)";
	ctx.fillStyle = "hsla(360, 100%, 100%," + this.alpha + " )";
	ctx.fill();
	/*
	ctx.strokeStyle = 'hsla(360, 100%, 100%,' + this.alpha + ')';
	ctx.stroke();
	*/
	// if (seeds.indexOf(s) % seedFreq == 1) {
	// 		ctx.filter = 'brightness(200%)';
	// 	}
	//
};

Seed.prototype.update = function(type, s, seed, b) {
	if (type == SeedType.BLOW || type == SeedType.RANDOM) {
		this.coord.x += this.velocity.x;
		this.coord.y += this.velocity.y;
		//this.velocity.x = this.velocity.x * 0.05;
		//this.velocity.y = this.velocity.y * 0.05;
	} else if (type == SeedType.STATIC) {
		this.coord.x += Math.cos(this.coord.x + twoPi) * this.radius * 0.9 / 1;
		this.coord.y += Math.sin(this.coord.y + twoPi) * this.radius * 0.9 / 1;
	}
	if (type == SeedType.BLOW) {
		this.radius += this.radiusGrow;
	}
	if (this.fadeIn) {
		this.alpha += this.fadeFreqIn;
	} else {
		this.alpha -= this.fadeFreqOut;
	}
	if (this.alpha >= 1) {
		this.fadeIn = false;
	} else if (this.alpha <= 0) {
		seed.seeds.splice(b, 1);
		seed.seedCount--;
	}
};

Seed.prototype.c_update = function(s) {};

function loop() {
	requestAnimationFrame(loop);
	constantSeeds();
	/*document.querySelector(".seed").addEventListener("click", function() {
		r_makeSeed = true;
		console.log('clicked');
		blowSeeds();
		
	});*/
}

main();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg