zoukankan      html  css  js  c++  java
  • 蒙版

    蒙版效果:
    1.插入图片标签
    2.设置一个半透明的div,并定位,rgba()
    3.将div与图片覆盖
    4.将鼠标悬停在div上时,设置隐藏div
    5.设置div的颜色渐变transition:all linear 5s(all ease-in 5s),先设置left,right,top,bootom的值,确定蒙版移动方向

    注:蒙版移动前后的定位方式(left,right,top,bootom)保持一致,要将图片和蒙版div放在同一个父级里


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box2{
    500px;
    height: 500px;
    outline: 1px solid black;
    position: relative;
    }
    .mb{
    height: 300px;
    100%;
    outline: 1px solid red;
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    /*background: linear-gradient(yellow,red);*/
    transition: all ease-in 2s;
    /*transition: all linear 2s;*/
    }
    .box2:hover .mb{bottom: 200px; transition: all ease-in 2s;}
    </style>
    </head>
    <body>
    <div class="box2">
    <img src="dm_pic03.jpg" alt=""/>
    <div class="mb">冯小漂儿你很棒!</div>
    </div>
    <div id="div"></div>
    </body>
    </html>

  • 相关阅读:
    【KVM系列 virt-v2v】virt-v2v过程中的报错
    大机与超级计算机的区别
    多路径 on linux
    ansible 管控 windows
    Linux启动盘
    RHCA 环境命令
    Xshell 4 连接 Ubuntu/Kali 报错 "找不到匹配的key exchange算法"
    security group & ACL
    windows powercfg
    OKD
  • 原文地址:https://www.cnblogs.com/fengxiaopiaoer/p/5702046.html
Copyright © 2011-2022 走看看