如何在CSS中自定義自己博客的鼠標樣式？

天來到天真網的朋友，可能會發現不一樣的地方，那就是本站的鼠標樣式換了。嘿嘿，這個是天真特意換的，畢竟默認的鼠標樣式太死板不是！如果你也想和天真一樣，想對自己博客的默認鼠標樣式進行美化，那么請繼續往下看吧！

第一步：大家要去找兩個比較好看的鼠標指針（博客中一般也就是用到默認鼠標和點擊鏈接的鼠標樣式）。你也可以下載本站使用的，或者直接前往系統之家分享的1067個鼠標指針挑選（點此直達訪問其他鼠標指針的樣式）。

鼠標指針

注意：一般是cur格式的（ani格式的不起作用），當然你選擇png格式也行，有能力的完全也可以自己ps兩個。

第二步：將所需鼠標指針下載到本地然后上傳到你的網站，比如存放在主題文件 images 文件夾中。（路徑可以隨意，等第三步記得填寫正確的路徑即可）。

第三步：這里也以WP博客為例，其他博客自行修改樣式表即可。進入WP博客后臺，點擊外觀 >> 編輯（一般默認都是正在使用主題的style.css樣式）>> 把以下代碼添加到 style.css 文件中更新保存即可。

/** 鼠標樣式開始**/
/** 普通指針樣式**/
body {cursor: url(http://tzw520.cn/wp-content/themes/Blogs/images/Arrow.cur), default;}
/** 鏈接指針樣式**/
a:hover{cursor:url(http://tzw520.cn/wp-content/themes/Blogs/images/help.cur), pointer;}
/** 鼠標樣式結束**/

注意：記得修改以上代碼的鼠標指針路徑哦。

第四步：清空瀏覽器緩存，更新緩存插件和 CDN 的 style.css 文件的緩存，這樣就大功告成了，在博客網站前臺就可以看到我們鼠標已經變得更漂亮更有個性了。

拓展閱讀

本文只分享了默認鼠標和鏈接鼠標的樣式，而我們一般下載的鼠標指針都包含了很多種情況下的鼠標指針，所以如果想要在博客網站上顯示整套的鼠標指針，那么只需要根據需要按照上述添加鏈接鼠標指針的方法添加相應的CSS代碼即可。具體鼠標指針的值如下：

以上各個值對應的鼠標指針樣式請移步體驗：鼠標指針變化。

作者：天真網

來源：boke112導航

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

代碼實現：

<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>

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

html中，我們經常會用到table布局；有時候需要實現指定單元格，當鼠標移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

html的文件結構大家都是知道的了，總體分為head和body部分

我們要實現變色，在head部分實現格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分，使用table時候，注明class="tablex".這樣的話，就實現了我們所說的效果了。

附上完整代碼：

<html>

<head>

<title>測試鼠標移到到表格單元格背景顏色改變的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一個瀏覽器中運行，效果如下

南大盛聯20年來一直致力于高端IT培訓--打造高級軟件人才實戰培訓專家，學生對我們的認可是我們一直前進的動力；項目團隊全球招聘，特聘來自海外的老師進行任教，采用100%商業項目進行實戰培訓，線上線下同步進行。

課程全部緊隨市場需求進行設計，并且動態進行調整；7天免費試聽，0首付開始學習，學完后進行100%推薦就業，不滿意工作崗位2次推薦。

選定一個平臺，認識一群志同道合的朋友，你的未來人生路必定不一樣。

目前已經開設下面這些培訓項目

Java培訓

安卓培訓

JavaWeb培訓

Linux培訓

云服務器布置培訓

HTML5培訓

SEO培訓

視頻剪輯培訓

UI培訓

歡迎您們分享給自己愿意分享的朋友，大家一起來進步；相互轉告，咨詢，學習。

南大盛聯培訓理念：我懂，我也能讓你懂。

在線咨詢

上一篇：初級PHP程序員遇到瓶頸應該怎么解決？
下一篇：「民辦初中」2021年廣州市義務教育學校招生報名系統

您的項目需求

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

整合營銷服務商

如何在CSS中自定義自己博客的鼠標樣式？

html中，我們經常會用到table布局；有時候需要實現指定單元格，當鼠標移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

您的項目需求