鼠标滑过特效

所属分类:UI-悬停

 41167  528  查看评论 (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:带倾斜效果的向右翻转。


相关插件-悬停

jquery鼠标悬停效果插件

用jquery制作的页面内容鼠标悬停效果的插件
  悬停
 38984  551

js鼠标滑过方向感效果

js鼠标滑过方向感知三维立方体动画
  悬停
 30341  474

jQuery鼠标悬停方向感知移入效果

jQuery简单实现鼠标各方为移入 代码简单易懂适合初学这阅读
  悬停
 33077  479

数十次css3鼠标悬停特效

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

讨论这个项目(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结构方便使用

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复