在寫文字模糊的時候要理清自己的思路，根據以下的步驟來：
- 對你要模糊的文字進行布局
<body style="background:#ccc;"> <ul class="con"> <li><h2>我是box1</h2></li> <li><h2>我是box2</h2></li> <li><h2>我是box3</h2></li> </ul> </body>
- 對你的布局設置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);這個是設置文字的顏色為黑色，然后是指其透明度為全部透明這幾條是必須要有得
**/ - 現在是寫你的一些交互的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) } } }
- 其實用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") }) }) })