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

(编辑:jimmy 日期: 2024/10/31 浏览:2)

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

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

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

在线预览    源码下载

使用方法

在页面中引入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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。