宜宾网站建设公司

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

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

创新互联是一家专注于网站设计制作、成都网站建设与策划设计,盐池网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:盐池等地区。盐池做网站价格咨询:13518219792

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

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

在线预览    源码下载

使用方法

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

CSS Code复制内容到剪贴板

  1.               

HTML结构

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.      

  3.         

  4.    

  

  •      

  •       

    Your Title

      

  •       

    ......

      

  •       Learn more  

  •    

    •   

    •               

    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怎么实现鼠标滑过图片动画效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    网页名称：纯CSS3怎么实现鼠标滑过图片动画效果
    网站URL：http://ybzwz.com/article/jdppih.html

    其他资讯