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

  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. 用"僵尸对象"调试内存管理问题

    Cocoa提供了"僵尸对象"(Zombie Object)这个功能.启用这项调试功能之后,运行时系统会把所有已经回收的实例转化成特殊的"僵尸对象",而不会真正回 ...

  2. file_get_contents抓取远程URL内容

    /** * POST URL * @param $url * @param null $post * @return false / string */ public static function ...

  3. 初试FitNesse

    1.下载fitnesse-standalone.jar 2.在cmd中输入,开启fitnesse server 3.在浏览器中输入: 4.编写代码: package fitnesse.slim.tes ...

  4. li ul 说明

    复制代码代码如下: <div id="menu">  <ul>  <li><a href="#">首页</ ...

  5. C#.Net 中的 new 的几个用法

    之前面试的时候,有人问过我这个问题,当时自己只记得两种.后来上msdn看了下,发现有三种,第三种用法基本没怎么用过 这里先贴出来: 三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约 ...

  6. 15. 星际争霸之php设计模式--策略模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  7. Windows下pry安装和配置

    Windows下pry安装和配置 pry是一个增强型的交互式命令行工具,比irb强大. 有自动完成功能,自动缩进,有颜色.有更强大的调试功能. pry 安装很简单. 在终端输入: gem instal ...

  8. ql Server 高频,高并发访问中的键查找死锁解析

    死锁对于DBA或是数据库开发人员而言并不陌生,它的引发多种多样,一般而言,数据库应用的开发者在设计时都会有一定的考量进而尽量避免死锁的产生.但有时因为一些特殊应用场景如高频查询,高并发查询下由于数据库 ...

  9. QT开发实战精解

    无法打开包括文件<QApplication> No such file or directory  这一问题 解决办法,使用QApplication时必须在项目pro文件中添加一句 QT ...

  10. 异步加载JS的4种方式（详解）

    方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...