首页>>Jquery文字>>鼠标经过类似开门效果的字体(2014-04-22)

鼠标经过类似开门效果的字体

鼠标经过类似开门效果的字体
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.             <div class="component">  
  3.                 <ul class="grid">  
  4.                       
  5.                     <li class="ot-letter-left"><span data-letter="F">F</span></li>  
  6.                     <li class="ot-letter-top"><span data-letter="R">R</span></li>  
  7.                     <li class="ot-letter-right"><span data-letter="E">E</span></li>  
  8.                     <li class="ot-letter-bottom"><span data-letter="E">E</span></li>  
  9.                     <li class="ot-letter-left"><span data-letter="J">J</span></li>  
  10.                     <li class="ot-letter-left"><span data-letter="S">S</span></li>  
  11.                     <li class="ot-letter-right"><span data-letter="S">S</span></li>  
  12.                     <li class="ot-letter-left"><span data-letter="B">B</span></li>  
  13.                     <li class="ot-letter-top"><span data-letter="L">L</span></li>  
  14.                     <li class="ot-letter-right"><span data-letter="T">T</span></li>  
  15.                     <li class="ot-letter-left"><span data-letter="K">K</span></li>  
  16.                     <li class="ot-letter-top"><span data-letter="S">S</span></li>  
  17.                     <li class="ot-letter-left"><span data-letter="Z">Z</span></li>  
  18.                     <li class="ot-letter-top"><span data-letter="3">3</span></li>  
  19.                     <li class="ot-letter-right"><span data-letter="D">D</span></li>  
  20.                     <li class="ot-letter-bottom"><span data-letter="I">I</span></li>  
  21.                     <li class="ot-letter-right"><span data-letter="H">H</span></li>  
  22.                     <li class="ot-letter-bottom"><span data-letter="Q">Q</span></li>  
  23.                     <li class="ot-letter-right"><span data-letter="E">E</span></li>  
  24.                     <li class="ot-letter-left"><span data-letter="A">A</span></li>  
  25.                     <li class="ot-letter-top"><span data-letter="P">P</span></li>  
  26.                     <li class="ot-letter-right"><span data-letter="F">F</span></li>  
  27.                     <li class="ot-letter-left"><span data-letter="S">S</span></li>  
  28.                     <li class="ot-letter-top"><span data-letter="K">K</span></li>  
  29.                     <li class="ot-letter-left"><span data-letter="U">U</span></li>  
  30.                     <li class="ot-letter-top"><span data-letter="L">L</span></li>  
  31.                     <li class="ot-letter-right"><span data-letter="6">6</span></li>  
  32.                     <li class="ot-letter-bottom"><span data-letter="R">R</span></li>  
  33.                     <li class="ot-letter-left"><span data-letter="O">O</span></li>  
  34.                     <li class="ot-letter-bottom"><span data-letter="V">V</span></li>  
  35.                     <li class="ot-letter-right"><span data-letter="S">S</span></li>  
  36.                     <li class="ot-letter-left"><span data-letter="Q">Q</span></li>  
  37.                     <li class="ot-letter-top"><span data-letter="J">J</span></li>  
  38.                     <li class="ot-letter-right"><span data-letter="G">G</span></li>  
  39.                     <li class="ot-letter-left"><span data-letter="R">R</span></li>  
  40.                 </ul>  
  41.             </div>  
  42.               
  43.         </div><!-- /container -->  

 


原文地址:http://www.freejs.net/article_jquerywenzi_313.html