7种鼠标hover炫酷CSS3 3d动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 7种鼠标hover炫酷CSS3 3d动画特效
7种鼠标hover炫酷CSS3 3d动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-06-02
    阅读:
麦子学院
简要教程

这是一款鼠标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用于指定鼠标移出时的动画效果。

网友评论