在写文字模糊的时候要理清自己的思路，根据以下的步骤来：

  1. 对你要模糊的文字进行布局

    <body style="background:#ccc;">
    
	<ul class="con">
    
		<li><h2>我是box1</h2></li>
    
		<li><h2>我是box2</h2></li>
    
		<li><h2>我是box3</h2></li>
    
	</ul>
    
</body>
  2. 对你的布局设置css样式 
    .con{width:510px;margin:0 auto;list-style-type:none;margin-top:20px;}
    
.con li{width:150px;height:150px;background:#fff;margin:10px;float:left;box-shadow:2px 2px 2px #999;-webkit-transition:0.5s all ease;}
    
.con .fuzzy{-webkit-transform:scale(0.9); box-shadow:0 0 10px 4px white; text-shadow:0 0 10px black;opacity:0.8; color:rgba(0,0,0,0);}
    
.con .amplification{-webkit-transform:scale(1.1);}

/**
    　　其中：
           -webkit-transition:0.5s all ease;是会在0.5秒的时间执行li的所有指定的动画
           text-shadow:0 0 10px black;这个是对文字设置黑色的阴影
           opacity:0.8;这个是整体的透明度

       color:rgba(0,0,0,0);这个是设置文字的颜色为黑色，然后是指其透明度为全部透明
       这几条是必须要有得

**/

    　

  3. 现在是写你的一些交互的js代码 
    window.onload=function(){
    
	var ali = document.getElementsByTagName("li");                 //获取li标签
    
	var timer = null;                                              //定义一个元素为空
    
	var i=0;
    
	for(i=0;i<ali.length;i++){                                     //对li进行遍历
    
		ali[i].onmouseover=function(){
    
			clearTimeout(timer);                           //当鼠标移入到li的时候清除定时
    
			for(i=0;i<ali.length;i++){                     //再对每个li进行遍历
    
				ali[i].className="fuzzy"               //然后给每个li加一个设置字体模糊样式的class
    
			}
    
			this.className="amplification"                 //然后给鼠标移入的本身加一个没有字体模糊效果的class
    
		};
    
		ali[i].onmouseout=function(){
    
			clearTimeout(timer);
    
			timer=setTimeout(function(){                   //鼠标移出的时候设置定时200毫秒过后设置每个li的class为空
    
				for(i=0;i<ali.length;i++){
    
					ali[i].className=''
    
				}
    
			},200)
    
		}
    
	}
    
}

    　　

  4. 其实用jquery还简单然后代码也简洁一点，只需要几句就行了，只是代码看上去装逼效果不是很好，哈哈哈哈 
    $(document).ready(function(){
    
	$("li").each(function(){
    
		var this_ = $(this);
    
		this_.hover(function(){

			$("li").addClass("fuzzy");
    
			$(this).removeClass("fuzzy").addClass("amplification")

		},function(){
    
			$("li").removeClass("fuzzy");
    
			$(this).removeClass("amplification")
    
		})
    
	})
    
})

    　　

js+css3文字模糊代码的更多相关文章

  1. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  2. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  3. css3火焰文字样式代码

    css样式: <style type="text/css"> body{background:#000;} *{margin:0;padding:0;transitio ...

  4. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  5. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  6. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  7. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  8. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  9. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

随机推荐

  1. WebSocket IO和后端建立长连接，即时接受后端消息

    https://github.com/TooTallNate/Java-WebSocket ant得到java_websocket.jar改名为WebSocket.jar放到 https://gith ...

  2. Nhiberate (一)

    严重参考感谢:@wolfy 操作数据库一直都是直接写SQL语句, 接触的ORM框架也不多,新项目要用数据库,数据库访问采用NHibernate. 1. NHibernate 是基于.Net 的针对关系 ...

  3. RDIFramework.NET开发实例━表约束条件权限的使用-WinForm

    RDIFramework.NET开发实例━表约束条件权限的使用-WinForm 在实际的应用中,客户常有这样的需求,指定用户或角色可以看指定条件下的数据,这里的“指定条件”在RDIFramework. ...

  4. 如何快速建立一个测试资源Web服务器及异步获取资源（Unity3D）

    背景 1.最近看了几位专栏作家的文章,几篇提到了资源通过网络的动态获取.如何建立一个快速的测试环境,不免是一个问题,也就最简单的就是假设http服务器了,微软系的当然首选的IIS了,别的也能用阿帕奇或 ...

  5. sdutoj 2623 The number of steps

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2623 The number of steps ...

  6. 彻底的放弃.net

    最近看了招聘信息,搜一搜 .net 高级信息,发现对比 JAVA ,只有1页,而 JAVA 至少有3页. 最近用了一下嗒嗒巴士,滴滴打车,各种团购,各种外卖,各种移动互联网改变生活的东西,无一和 .n ...

  7. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  8. POJ - 1107 W's Cipher

    POJ - 1107 W's Cipher Time Limit: 1000MS Memory Limit: 10000KB 64bit IO Format: %I64d & %I64u De ...

  9. ROS探索总结（三）——ROS新手教程【转】

    转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一ROS的 ...

  10. dotfiles管理

    刚刚知道dotfiles这个东西,百度也没发现什么太有价值的讲解,还都是英文,所以自己立志来好好屡屡清楚 1.dotfiles是什么?我自己的理解:linux下(mac下)有各种app,每个人会根据自 ...