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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/81330409

                             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的用法可以查看文档文章开头给出的链接

到此结束

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页