欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-01 16:12:10
这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果,每一个动画效果都很精彩,值得大家学习借鉴,感兴趣的小伙伴们可以参考一下... 16-03-16...

这是一款效果超酷的纯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.   floatleft;    
  3.   width340px;    
  4.   positionrelative;    
  5.   overflowhidden;    
  6.   text-aligncenter;    
  7.   border4px solid rgba(255, 255, 255, 0.9);    
  8.   overflowvisible;   
  9. }   
  10. .effect-1 img{   
  11.   transition: 0.5s;   
  12. }   
  13. .effect-1:hover img{   
  14.   transform: scale(0.3) translatey(-110%);   
  15.   positionrelative;    
  16.   z-index: 9;   
  17. } .effect-1 .text-desc{   
  18.   transform: translatey(100%);    
  19.   opacity: 0;    
  20.   padding85px 20px 10px;    
  21.   transition: 0.5s;   
  22. } .effect-1:hover .text-desc{   
  23.   transform: translatey(0px);    
  24.   opacity: 1;   
  25. }     
  26.   

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

原文: