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

  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. http://bbs.tianya.cn/post-stocks-1665898-1.shtml

    http://bbs.tianya.cn/post-stocks-1295707-1.shtml 写过交易计划吗?有没有提前关注过某些板块或者某些股票呢?自选股里边有多少只股票?你平时复盘都是什么习惯 ...

  2. [SLAM] GMapping SLAM源码阅读（草稿）

    目前可以从很多地方得到RBPF的代码,主要看的是Cyrill Stachniss的代码,据此进行理解. Author:Giorgio Grisetti; Cyrill Stachniss  http: ...

  3. javascript源代码学习之五——jQuery.deferred

    jQuery.Defered——异步队列用于管理一组回调函数(成功resolve,失败reject,消息progress),基于上一节实现的jQuery.callbacks完成. done,fail, ...

  4. vertical-align属性

    准备阶段 vertical-align取值及含义: 值 含义 baseline 默认.元素放置在父元素的基线上. top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字 ...

  5. 在xcode运行编译时，编译成功，但项目中显示缺少该文件，这是只要关闭重启xcode即可。

    在xcode运行编译时,编译成功,但项目中显示缺少该文件,这是只要关闭重启xcode即可.

  6. How to use PEM of PPAS

    -bash-4.1$ pwd/opt/PostgresPlus/9.3AS/client-v4/scripts -bash-4.1$ lsclient launchPEMClient.sh -bash ...

  7. Centos 安装 MySql

    下载mysql下载链接:http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.10-linux-glibc2.5-i686.tar.gz 下载后 ...

  8. ES5 bind方法

    function getConfig(colors,size,otherOptions){ console.log(colors,size,otherOptions); } var defaultCo ...

  9. C# 参数化SQL语句中的like和in

    在写项目的时候遇到一个问题,sql 语句进行 like in 参数化,按照正常的方式是无法实现的我们一般的思维是: Like 参数:string strSql = "select * fro ...

  10. datatable-提示

    ｀默认columns配置问题: 记住是columnDefs不是columnsDefs ｀Cannot read property 'sWidth' of undefined: columns的数量和t ...