脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

纯CSS3实现8组超炫酷鼠标滑过图片动画

  发布时间：2016-03-16 09:40:10   作者：爱上程序猿   我要评论
这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下

这是一款效果超酷的纯CSS3鼠标滑过图片动画效果，它共分为8组不同的效果，它们分别在鼠标滑过图片时，以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的，分别有：滑动效果，倾斜效果，翻转效果，旋转效果等等，下面是一张GIF的预览图片。

在线预览    源码下载

使用方法

在页面中引入hover-effects.css文件。

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" href="css/hover-effects.css" />              

HTML结构

以其中一种鼠标滑过图片动画效果为例，它的HTML结构如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="effect-1">  
  2.    <div class="image-box">  
  3.       <img src="img-2.jpg" alt="Image-3">  
  4.    </div>  
  5.    <div class="text-desc">  
  6.       <h3>Your Title</h3>  
  7.       <p>......</p>  
  8.       <a href="#" class="btn">Learn more</a>  
  9.    </div>  
  10. </div>              

CSS样式

CSS Code复制内容到剪贴板
  1. .effect-1{   
  2.   float: left;    
  3.   width: 340px;    
  4.   position: relative;    
  5.   overflow: hidden;    
  6.   text-align: center;    
  7.   border: 4px solid rgba(255, 255, 255, 0.9);    
  8.   overflow: visible;   
  9. }   
  10. .effect-1 img{   
  11.   transition: 0.5s;   
  12. }   
  13. .effect-1:hover img{   
  14.   transform: scale(0.3) translateY(-110%);   
  15.   position: relative;    
  16.   z-index: 9;   
  17. } .effect-1 .text-desc{   
  18.   transform: translateY(100%);    
  19.   opacity: 0;    
  20.   padding: 85px 20px 10px;    
  21.   transition: 0.5s;   
  22. } .effect-1:hover .text-desc{   
  23.   transform: translateY(0px);    
  24.   opacity: 1;   
  25. }     
  26.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/w2bc/p/5279180.html

相关文章

  • 纯CSS3实现鼠标滑过按钮动画第二节

    这篇文章主要介绍了纯CSS3实现鼠标滑过按钮动画第二节,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-16

  • CSS实现鼠标滑过鼠标点击代码写法

    本文给大家分享css代码实现鼠标滑过鼠标点击的写法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2016-12-26

  • CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

    这篇文章主要为大家详细介绍了CSS3制作炫酷带方向感应的鼠标滑过图片3D动画，具有一定的参考价值，并兼容目前最新的各类主流浏览器，感兴趣的小伙伴们可以参考一下
    2016-03-16

  • css实现鼠标滑过五角星高亮效果

    关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现鼠标滑过五角星高亮效果，对此功能感兴趣的朋友一起学习吧
    2016-01-20

  • 纯CSS实现鼠标滑过显示子菜单的二级菜单效果

    这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参
    2015-09-14

  • CSS实现鼠标滑过文字弹出一段说明文字无JS代码

    鼠标滑过文字弹出一段说明文字CSS实现，无JS代码，下面代码直接拷贝了就可用
    2014-05-20

  • 纯css实现鼠标滑过弹出层效果

    弹出层想必大家都有见到过吧，在以前或许是使用js实现的，不过现在我们可以使用纯css来实现了，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-10-16

  • CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现，感兴趣的朋友，不要错过
    2013-10-12

  • css实现鼠标滑过改变文字(中文变英文)

    鼠标滑过改变文字的效果想必很多朋友都有遇到过吧，本文为大家介绍下css是如何实现的，感兴趣的朋友可以了解下
    2013-09-09

  • 使用css的filter写鼠标滑过效果的实现示例

    这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编
    2020-08-13

最新评论

关注微信公众号

扫一扫