纯CSS3怎么实现鼠标滑过图片动画效果

本篇内容介绍了“纯CSS3怎么实现鼠标滑过图片动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

这些鼠标滑过图片时的动画效果都是使用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.       <h4>Your Title</h4>  

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.   

“纯CSS3怎么实现鼠标滑过图片动画效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！