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过渡即可以实现这个效果，是不是很简单，但是第一次弄还是有点难受。

<div class="pictureContent">
        <div class="pictureContentLeft">
          <div class="pictureImageWrapper">
            <div class="pictureImage" :style="{backgroundImage:`url(${imageUrl})`}">
              <div class="pictureTemp"></div>
              <div class="pictureDesc">
                <p>郎德苗寨</p>
              </div>
            </div>
          </div>
        </div>
      </div>

二、css3加hover实现效果

<style lang="stylus" scoped>
   .pictureContent {
    background-color white
    padding 15px 15px
    display flex
    width 1170px
    height 350px
    margin 0 auto
    .pictureContentLeft {
      margin-right 10px
      width 50%
      .pictureImageWrapper {
        cursor pointer
        width 580px
        height 350px
        overflow hidden
        .pictureImage {
          width 580px
          height 350px
          background-repeat: no-repeat;
          background-size: cover;
          background-position 50% 50%
          .pictureDesc {
            width 100%
            height 50px
            background: rgba(0, 0, 0, 0.5);
            transition all 0.2s linear
            p {
              color white
              padding-left 5px
              line-height 50px
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
          .pictureTemp {
            transition all 0.2s linear
            width 100%
            height 300px
          }
        }
      }
      .pictureImageWrapper:hover {
        text-align center
        .pictureTemp {
          height 0px
        }
        .pictureDesc {
          height 350px
          p {
            line-height 350px
          }
        }
      }
    }
  }
</style>

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

到此结束