鼠标滑过特效

所属分类:UI-悬停

 30012  371  查看评论 (15)
分享到微信朋友圈
X
鼠标滑过特效 ie兼容10

使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件。

<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />

或者:

<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />

该CSS3鼠标滑过图片遮罩层动画特效的基本HTML结构如下:

<div class="pic">
    <img src="img/01.jpg" class="pic-image" alt="Pic"/>
    <span class="pic-caption bottom-to-top">
        <h1 class="pic-title">Pic Title</h1>
        <p>图片描述文本</p>
    </span>
</div>


可用的动画效果

该CSS3鼠标滑过图片遮罩层动画特效有以下12种可用的CSS3动画效果。

.bottom-to-top:从下到上滑动。
.top-to-bottom:从上到下滑动。
.left-to-right:从左向右滑动。
.right-to-left:从右向左滑动。
.rotate-in:旋转进入。
.rotate-out:旋转离开。
.open-up:向上翻转。
.open-down:向下翻转。
.open-left:向左翻转。
.open-right:向右翻转。
.come-left:带倾斜效果的向左翻转。
.come-right:带倾斜效果的向右翻转。


相关插件-悬停

鼠标移入展开(原创)

适用于鼠标移入产品详情展示
  悬停
 15135  211

数十次css3鼠标悬停特效

鼠标移上去,界面显示的多种方式,各种css3动画
  悬停
 25733  660

css鼠标悬停效果,自适应页面大小

网站常用功能展示,css鼠标悬停效果
  悬停
 6161  93

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果,图片上有简短标题和说明,兼容主流浏览器
  悬停
 23562  276

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    叛逆小逊 0
    2019/5/11 4:23:44
    那时年少丶 0
    2017/11/22 11:48:12
    Rita 0
    2017/10/26 15:08:20
    失散多年的傻X 0
    2017/8/8 15:32:04
    发i光哟 0
    2017/7/10 14:39:44
    模块变暗,出现遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效. 回复
    超究假面―霸掩面 0
    2017/1/4 11:01:55
    C 0
    2016/5/23 14:05:06
    感觉不错,试一试 回复
    向一路北 0
    2016/4/21 17:04:13
       Kt. 0
    2015/12/20 22:12:20

    样式写在一起 怎么分啊

        偏执的国王0
        2016/7/5 9:07:37
        我也看不懂
    回复
    荏苒 0
    2015/12/2 14:12:27

    效果看起来很棒, html结构方便使用

    回复
取消回复