HTML5的裝逼法寶之-鼠標特效

這個用戶體驗為王的時代，有各種酷炫主流的畫面操作，毫無疑問是非常重要的，今天我們就來實現鼠標特效——火焰

代碼實現：

<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas火焰跟隨鼠標動畫DEMO演示</title>
<style>
html, body {
	margin:0;
	padding:0;
	height: 100%;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<canvas id="fire"></canvas>
<script>
var Fire = function(){
	this.canvas 		= document.getElementById('fire');
	this.ctx 			= this.canvas.getContext('2d');
	this.canvas.height 	= window.innerHeight;
	this.canvas.width 	= window.innerWidth;
	this.aFires 		= [];
	this.aSpark 		= [];
	this.aSpark2 		= [];
	this.mouse = {
		x : this.canvas.width * .5,
		y : this.canvas.height * .75,
	}
	this.init();
}
Fire.prototype.init = function()
{
	
	this.canvas.addEventListener('mousemove', this.updateMouse.bind( this ), false);
}
Fire.prototype.run = function(){
	
	this.update();
	this.draw();
	if( this.bRuning )
		requestAnimationFrame( this.run.bind( this ) );
}
Fire.prototype.start = function(){
	this.bRuning = true;
	this.run();
}
Fire.prototype.stop = function(){
	this.bRuning = false;
}
Fire.prototype.update = function(){
	this.aFires.push( new Flame( this.mouse ) );
	this.aSpark.push( new Spark( this.mouse ) );
	this.aSpark2.push( new Spark( this.mouse ) );
	for (var i = this.aFires.length - 1; i >= 0; i--) {
		if( this.aFires[i].alive )
			this.aFires[i].update();
		else
			this.aFires.splice( i, 1 );
	}
	for (var i = this.aSpark.length - 1; i >= 0; i--) {
		if( this.aSpark[i].alive )
			this.aSpark[i].update();
		else
			this.aSpark.splice( i, 1 );
	}
	for (var i = this.aSpark2.length - 1; i >= 0; i--) {
		if( this.aSpark2[i].alive )
			this.aSpark2[i].update();
		else
			this.aSpark2.splice( i, 1 );
	}
}
Fire.prototype.draw = function(){
	this.ctx.globalCompositeOperation = "source-over";
	this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";
	this.ctx.fillRect( 0, 0, window.innerWidth, window.innerHeight );
	
	this.grd = this.ctx.createRadialGradient( this.mouse.x, this.mouse.y - 200,200,this.mouse.x, this.mouse.y - 100,0 );
	this.grd.addColorStop(0,"rgb( 15, 5, 2 )");
	this.grd.addColorStop(1,"rgb( 30, 10, 2 )");
	this.ctx.beginPath();
	this.ctx.arc( this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI );
	this.ctx.fillStyle= this.grd;
	this.ctx.fill();
	
	this.ctx.font = "15em Amatic SC";
	this.ctx.textAlign = "center";
	this.ctx.strokeStyle = "rgb(50, 20, 0)";
	this.ctx.fillStyle = "rgb(120, 10, 0)";
	this.ctx.lineWidth = 2;
	this.ctx.strokeText("Fire",this.canvas.width/2, this.canvas.height * .72 );
	this.ctx.fillText("Fire",this.canvas.width/2, this.canvas.height * .72 );	
	this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-light
	for (var i = this.aFires.length - 1; i >= 0; i--) {
		this.aFires[i].draw( this.ctx );
	}
	this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge";
	for (var i = this.aSpark.length - 1; i >= 0; i--) {
		
		if( ( i % 2 ) === 0 )
			this.aSpark[i].draw( this.ctx );
	}
	this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge";
	for (var i = this.aSpark2.length - 1; i >= 0; i--) {
		this.aSpark2[i].draw( this.ctx );
	}
}
Fire.prototype.updateMouse = function( e ){
	this.mouse.x = e.clientX;
	this.mouse.y = e.clientY;
	//this.aFires.push( new Flame( this.mouse ) );
}
var Flame = function( mouse ){
	this.cx = mouse.x;
	this.cy = mouse.y;
	this.x = rand( this.cx - 25, this.cx + 25);
	this.y = rand( this.cy - 5, this.cy + 5);
	this.vy = rand( 1, 3 );
	this.vx = rand( -1, 1 );
	this.r = rand( 20, 30 );
	this.life = rand( 3, 6 );
	this.alive = true;
	this.c = {
		h : Math.floor( rand( 2, 40) ),
		s : 100,
		l : rand( 80, 100 ),
		a : 0,
		ta : rand( 0.8, 0.9 )
	}
}
Flame.prototype.update = function()
{
	this.y -= this.vy;
	this.vy += 0.05;
	this.x += this.vx;
	if( this.x < this.cx )
		this.vx += 0.1;
	else
		this.vx -= 0.1;
	if( this.r > 0 )
		this.r -= 0.1;
	
	if( this.r <= 0 )
		this.r = 0;
	this.life -= 0.15;
	if( this.life <= 0 ){
		this.c.a -= 0.05;
		if( this.c.a <= 0 )
			this.alive = false;
	}else if( this.life > 0 && this.c.a < this.c.ta ){
		this.c.a += .08;
	}
}
Flame.prototype.draw = function( ctx ){
	ctx.beginPath();
	ctx.arc( this.x, this.y, this.r * 3, 0, 2*Math.PI );
	ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a/20) + ")";
	ctx.fill();
	ctx.beginPath();
	ctx.arc( this.x, this.y, this.r, 0, 2*Math.PI );
	ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
	ctx.fill();
}
var Spark = function( mouse ){
	this.cx = mouse.x;
	this.cy = mouse.y;
	this.x = rand( this.cx -40, this.cx + 40);
	this.y = rand( this.cy, this.cy + 5);
	this.lx = this.x;
	this.ly = this.y;
	this.vy = rand( 1, 3 );
	this.vx = rand( -4, 4 );
	this.r = rand( 0, 1 );
	this.life = rand( 4, 5 );
	this.alive = true;
	this.c = {
		h : Math.floor( rand( 2, 40) ),
		s : 100,
		l : rand( 40, 100 ),
		a : rand( 0.8, 0.9 )
	}
}
Spark.prototype.update = function()
{
	this.lx = this.x;
	this.ly = this.y;
	this.y -= this.vy;
	this.x += this.vx;
	if( this.x < this.cx )
		this.vx += 0.2;
	else
		this.vx -= 0.2;
	this.vy += 0.08;
	this.life -= 0.1;
	if( this.life <= 0 ){
		this.c.a -= 0.05;
		if( this.c.a <= 0 )
			this.alive = false;
	}
}
Spark.prototype.draw = function( ctx ){
	ctx.beginPath();
	ctx.moveTo( this.lx , this.ly);
	ctx.lineTo( this.x, this.y);
	ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")";
	ctx.lineWidth = this.r * 2;
	ctx.lineCap = 'round';
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();
	ctx.moveTo( this.lx , this.ly);
	ctx.lineTo( this.x, this.y);
	ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
	ctx.lineWidth = this.r;
	ctx.stroke();
	ctx.closePath();
}
rand = function( min, max ){ return Math.random() * ( max - min) + min; };
onresize = function () { oCanvas.canvas.width = window.innerWidth; oCanvas.canvas.height = window.innerHeight; };
var oCanvas;
init = function()
{
	oCanvas = new Fire();
	oCanvas.start();
}
window.onload = init;
</script>
</body>
</html>

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信回復小明“學習” 獲取前端學習資料，一起學習！

用css3制作鼠標滑過內容上移特效，運用到CSS3的動畫過渡屬性

前后對比圖！

實現代碼：

例

各位長友大家早上好，

今天給大家帶來的是 9款css3鼠標劃過圖片散開特效源碼！

大家可以自行發揮做成自己喜歡的樣子！

若想要文件版源碼，請看評論區！

廢話不多說，上源碼！

CSS源碼：

body {

margin: 0px;

padding: 0px;

background-color: #C3CCD5;

font-family: 'Source Sans Pro', sans-serif;

}

.albums{

width: 100%;

float: left;

}

.albums-inner{

width: 1100px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

}

.albums-title {

float: left;

width: 100%;

color: rgba(53,117,159,1);

font-size: 20px;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: rgba(53,117,159,1);

line-height: 50px;

margin-bottom: 100px;

}

.albums-tab{

float: left;

width: 300px;

margin-right: 100px;

margin-bottom: 100px;

}

.albums-tab:nth-child(3n+0) {

margin-right: 0px;

}

.albums-tab-thumb{

float: left;

width: 300px;

height: 200px;

}

.albums-tab-thumb img {

height: auto;

width: 290px;

background-color: rgba(255,255,255,1);

padding: 5px;

}

.albums-tab-text{

float: left;

width: 100%;

text-align: center;

color: rgba(53,117,159,1);

margin-top: 15px;

font-size: 18px;

}

.albums-tab-text span {

font-size: 14px;

color: rgba(102,102,102,1);

}

index：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>9款css3鼠標劃過圖片散開特效代碼 | 手機網站特效| 網頁特效庫</title>

</head>

<body>

</div>

<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>

</div>

</div>

</body>

</html>

在線咨詢

上一篇：HTML實現文件夾的上傳和下載
下一篇：HTML+CSS+JS發光開關按鈕

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5的裝逼法寶之-鼠標特效

CSS源碼：

index：

您的項目需求