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

清疚 2022-05-18 08:42 546阅读 0赞

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

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

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

![70][]

![70 1][]

![70 2][]

![70 3][]

那么下面我们就给出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的用法可以查看文档文章开头给出的链接

![70 4][]

到此结束

[http_www.w3school.com.cn_tiy_t.asp_f_css3_transition1]: http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1
[70]: /images/20220518/08250d6049b14e0c85a3f785200fd1c9.png
[70 1]: /images/20220518/74d352dead414585a6e5eae9b7f27d10.png
[70 2]: /images/20220518/35a84b78628a44179f672bc005fc1d61.png
[70 3]: /images/20220518/5de2942f45e94aa6895ca4cf31295865.png
[70 4]: /images/20220518/07c1a0915418403e9db3046be0594bd1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关图片遮罩效果

欢迎访问我的博客地址 : [博客地址][Link 1] **鼠标移入容器半遮罩层从下方逐渐移上去** 话不多说，直接上代码! <!DOCTYPE html...

小咪咪/ 2024年04月18日 16:53/ 0 赞/ 119 阅读

相关渐变纹理和遮罩纹理

渐变纹理纹理不仅可以定义一个物体的颜色，也可以用来存储任何表面属性。比如用渐变纹理来控制漫反射光照结果。可以通过使用不同的渐变纹理来控制物体的漫反射光照。

约定不等于承诺〃/ 2023年07月07日 08:09/ 0 赞/ 36 阅读

相关前端遮罩效果

var layer=$('<div id="layer" style="width:1999px ;height: 1999px;position: absolute;

你的名字/ 2023年01月08日 02:21/ 0 赞/ 263 阅读

相关 css3、scss给图片加遮罩层

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 11:46/ 0 赞/ 246 阅读

相关 CSS背景遮罩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2022年09月01日 07:59/ 0 赞/ 308 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 398 阅读

相关实现遮罩效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "vi

客官°小女子只卖身不卖艺/ 2022年05月25日 02:46/ 0 赞/ 303 阅读

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

css3 加 hover 实现网页遮罩从下至上渐变拉伸效果这种效果在很多稍微炫酷的网站都会用到，开始自己也一直琢磨

清疚/ 2022年05月18日 08:42/ 0 赞/ 547 阅读

相关用js（hover ）+css实现下拉框效果（有效果图）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

忘是亡心i/ 2022年03月26日 08:00/ 0 赞/ 328 阅读

相关 CSS遮罩mask

前面的话　　CSS遮罩是[2008年4月][2008_4]由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位

系统管理员/ 2021年09月20日 11:44/ 0 赞/ 501 阅读