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

  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. ionic安装指定版本

    npm install -g ionic@1.4.0 原文地址:http://stackoverflow.com/questions/30316994/how-to-install-specific- ...

  2. delphi关闭程序Close,application.Terminate与halt区别

    当Close是一个主窗体时,程序会退出.Close会发生FormClose事件,FormCloseQuery事件Halt会发生FormDestory事件,Application.Terminate以上 ...

  3. ios--时间格式化(cell业务逻辑处理)

    一.点击更多按钮 1.项目需求      点击更多按钮,从底部弹出一个框  2.怎么从底部弹出一个框?           两种方法:                 一种用 UIActionShee ...

  4. android cocos2d-x for Android安装和学习笔记（请用adt-bundle21.1或以上导入）

    引用:http://weimingtom.iteye.com/blog/1483566 (20121108)注意:这篇文章用cdt编译ndk工程的内容已过时(现在可以用adt-bundle,避免配置繁 ...

  5. linux中非root用户使用wireshark进行抓包

    开始的时候我是在终端中使用sudo 命令打开 wireshark 的,因为如果不这样的话 wireshark 就没法抓包啊.偶尔抓一次包就使用这样的方式提权. 今天使用 wireshark 的时候特意 ...

  6. Windows10 如何删掉内置的 skype ？

    打开开始菜单,输入“PowerShell”并回车: 运行“Get-AppxPackage -User username”命令( username 请替换成当前实际用户名),此时会显示所有已安装的应用程 ...

  7. VBA 操作 Excel 生成日期及星期

    直接上代码~~ 1.  在一个 Excel 生成当月或当年指定月份的日期及星期 ' 获取星期的显示 Function disp(i As Integer) Select Case i disp = & ...

  8. PHP Socket 编程过程详解

    使用代码 目的:开发一个客户端用于发送string消息到服务端,服务端将相同的信息反转后返回给客户端. PHP服务器 第1步:设置变量,如“主机”和“端口” $host = "127.0.0 ...

  9. 卸载cygwin

    1.下载takeown.exe(貌似win自带,你可以打开cmd 输入takeown.exe查看,貌似不行)所以还是去网上下载吧,亲测http://download.csdn.net/download ...

  10. java正则表达式的使用

    姿势: Pattern pattern = Pattern.compile("^Java.*");Matcher matcher = pattern.matcher("J ...