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

  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. magento 备份

    magento 备份分为“文件备份”和“数据备份” 我们先来讲下“数据备份” 数据备份的方法有 通过数据库软件直接导出magento使用的数据库,使用mysql命名或者phpmyadmin,导出来就好 ...

  2. spring设置webAppRootKey

    今天一个同事来问webAppRootKey 在哪设置的 <context-param> <param-name>webAppRootKey</param-name> ...

  3. Leetcode: 4Sum II

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...

  4. pycharm下载 -professional

    Jet Brains 开发的PyCharm 我传到百度云上了.只供开发使用,违者必究.大家一起学开发.有谁有python 进阶 电子书,可以发到我的邮箱里:120946018@qq.com,谢谢 Ma ...

  5. paper 101：图像融合算法及视觉艺术应用

    1:基于泊松方程的图像融合方法,利用偏微分方程实现了不同图像上区域的无缝融合.比较经典的文章: P. Pérez, M. Gangnet, A. Blake. Poisson image editin ...

  6. 弹性伸缩布局flex

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + posi ...

  7. Failed to execute request because the App-Domain could not be created.

    原错误信息: 服务器应用程序不可用 您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误 ...

  8. Bison

  9. Wormholes

    Description While exploring his many farms, Farmer John has discovered a number of amazing wormholes ...

  10. 解决 .so文件64与32不兼容问题

    http://blog.csdn.net/vhawk/article/details/49964475 android64位机子兼容32位.so库文件 2016-11-25 19:39 5416人阅读 ...