这是一款鼠标hover炫酷CSS3 3d动画特效，共7种不同的鼠标hover图片效果。该特效基于magic.css来实现，可以制作出非常漂亮的鼠标hover图片效果。

使用方法

在页面中引入magic.css文件。

<link href="path/to/css/magic.css" rel="stylesheet">
                

HTML结构

该鼠标hover图片特效的基本HTML结构如下：

<div class="box">
  <div class="box-content">
    <div class="box-wrapper">
      God in Creation<span class="name">Matt Scribner</span>
      <div class="row">92 likes - 1,410 views</div>         
    </div>
  </div>
  <div class="box-overlay magictime" data-hover="puffOut" data-return="puffIn">
    <img src="img/1.jpg" alt="" />
  </div>
  <a class="link" href="#" target="_blank"></a>           
</div>
                

其中的div.box-overlay是鼠标hover时，产生动画的遮罩层。data-hover属性用于指定鼠标hover时的效果，data-return用于指定鼠标移出时的动画效果。

在线预览    源码下载