整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

如何在CSS中自定义自己博客的鼠标样式？

如何在CSS中自定义自己博客的鼠标样式？

天来到天真网的朋友，可能会发现不一样的地方，那就是本站的鼠标样式换了。嘿嘿，这个是天真特意换的，毕竟默认的鼠标样式太死板不是！如果你也想和天真一样，想对自己博客的默认鼠标样式进行美化，那么请继续往下看吧！

第一步：大家要去找两个比较好看的鼠标指针（博客中一般也就是用到默认鼠标和点击链接的鼠标样式）。你也可以下载本站使用的，或者直接前往系统之家分享的1067个鼠标指针挑选（点此直达访问其他鼠标指针的样式）。

鼠标指针

注意：一般是cur格式的（ani格式的不起作用），当然你选择png格式也行，有能力的完全也可以自己ps两个。

第二步：将所需鼠标指针下载到本地然后上传到你的网站，比如存放在主题文件 images 文件夹中。（路径可以随意，等第三步记得填写正确的路径即可）。

第三步：这里也以WP博客为例，其他博客自行修改样式表即可。进入WP博客后台，点击外观 >> 编辑（一般默认都是正在使用主题的style.css样式）>> 把以下代码添加到 style.css 文件中更新保存即可。

  1. /** 鼠标样式 开始**/

  2. /** 普通指针样式**/

  3. body {cursor: url(http://tzw520.cn/wp-content/themes/Blogs/images/Arrow.cur), default;}

  4. /** 链接指针样式**/

  5. a:hover{cursor:url(http://tzw520.cn/wp-content/themes/Blogs/images/help.cur), pointer;}

  6. /** 鼠标样式 结束**/

注意：记得修改以上代码的鼠标指针路径哦。

第四步：清空浏览器缓存，更新缓存插件和 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>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

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

<table class="table1" width="70%" border="1">

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

</table>

</body>

</html>

在任何一个浏览器中运行，效果如下




南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家，学生对我们的认可是我们一直前进的动力；项目团队全球招聘，特聘来自海外的老师进行任教，采用100%商业项目进行实战培训，线上线下同步进行。

课程全部紧随市场需求进行设计，并且动态进行调整；7天免费试听，0首付开始学习，学完后进行100%推荐就业，不满意工作岗位2次推荐。

选定一个平台，认识一群志同道合的朋友，你的未来人生路必定不一样。

目前已经开设下面这些培训项目

Java培训

安卓培训

JavaWeb培训

Linux培训

云服务器布置培训

HTML5培训

SEO培训

视频剪辑培训

UI培训

欢迎您们分享给自己愿意分享的朋友，大家一起来进步；相互转告，咨询，学习。

南大盛联培训理念：我懂，我也能让你懂。


在线咨询
上一篇：初级PHP程序员遇到瓶颈应该怎么解决？
下一篇：「民办初中」2021年广州市义务教育学校招生报名系统

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 金水区 曲阜 牧野区 威宁彝族回族苗族自治县 宁晋县 贺兰县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服