css3 加 hover 实现网页遮罩从下至上渐变拉伸效果

                             css3 加 hover 实现网页遮罩从下至上渐变拉伸效果

这种效果在很多稍微炫酷的网站都会用到，开始自己也一直琢磨怎么写，去了W3C上面看了一下有一个css3过渡效果，没错，文档就是它了http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1，但是一直感觉到很苦恼，它的效果是从上至下，一直无法改变过来。搞了差不多2个小时就为了一直研究这个东西，但是最终还是弄出来了。

首先看一下效果图，不知道csdn怎么一直不出添加短视频的编辑，渐变效果是这样的，图片说明：

 

 

 

 

 那么下面我们就给出html + css 的实现效果

一、html（VUE写法，不懂可以咨询, imageUrl为你本地图片路径，我的就是‘assets/images/home/kaili.jpg’），.背景为一张图片，图片上部分是.pictureTemp白色div,下面部分是.pictureDesc 阴影div和字体描述，通过控制高度加上css3过渡即可以实现这个效果，是不是很简单，但是第一次弄还是有点难受。

        

          

            

              

              

                
郎德苗寨
              
            
          
        
      

二、css3加hover实现效果

transition all 0.2s linear 就是我们的动画效果，hover就是改变我们的高度，两者结合效果即可实现，关于transition的用法可以查看文档文章开头给出的链接

到此结束