纯CSS完成电脑鼠标放上拖动出半全透明实际效果

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

实际效果以下:

案例1

案例2以案例1【婚礼方案策划】为例

HTML:

<div class="itemInWorks" >
   婚礼方案策划
   <div class="mask">
       情况:待进行<br>
       实行者:张3<br>
       截止时间:2020/03/15
   </div>
</div>

CSS:

/*外层div一部分*/
.itemInWorks{
    width: 180px;
    height: 130px;
    border-radius:5px;/*圆角*/
    font-size: 18px;
    font-weight: 600;
    color: dimgrey;
    text-align: center;/*文本“婚礼方案策划”水平垂直居中*/
    line-height: 50px;/*文本“婚礼方案策划”竖直垂直居中*/
    background: url('image/works_image/4.jpg');
    background-repeat: no-repeat;
    background-size: 180px 130px;
    box-shadow: #909090 0px 0px 10px;/*周边黑影*/
    /*以上依据本人的实际效果自定*/
    overflow: hidden;
    position: relative;
}
/*半全透明一部分*/
.itemInWorks .mask{
    height:80px;
    width:172px;
    color: #f5f1e5;
    line-height: 23px;
    text-align: left;
    padding-left: 8px;
    border-radius:2px 2px 5px 5px;
    font-size: 14px;
    font-weight: 300;
    /*以上依据本人的实际效果自定*/
    position: absolute;
    top:130px;/*电脑鼠标不放时,半全透明一部分最高处离外层div顶端间距*/
    background-color:rgba(0,0,0,0.5);/*全透明度*/
    transition:top 0.5s ease-in-out;/*更改top特性,0.5秒进行,慢刚开始慢完毕*/
}
.itemInWorks:hover .mask{
    top:50px ;/*电脑鼠标放上时,拖动到的最高处离外层div顶端间距*/
}

所有编码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
</head>
<style>
    .itemInWorks{
        width: 180px;
        height: 130px;
        border-radius:5px;
        font-size: 18px;
        font-weight: 600;
        color: dimgrey;
        text-align: center;
        line-height: 50px;
        background: url('image/works_image/4.jpg');
        background-repeat: no-repeat;
        background-size: 180px 130px;
        box-shadow: #909090 0px 0px 10px;
        overflow: hidden;
        position: relative;
    }
    /*半全透明一部分*/
    .itemInWorks .mask{
        height:80px;
        width:172px;
        color: #f5f1e5;
        line-height: 23px;
        text-align: left;
        padding-left: 8px;
        border-radius:2px 2px 5px 5px;
        font-size: 14px;
        font-weight: 300;
        position: absolute;
        top:130px;
        background-color:rgba(0,0,0,0.5);
        transition:top 0.5s ease-in-out;
    }
    .itemInWorks:hover .mask{
        top:50px ;
    }
</style>
<body>
<div class="itemInWorks" >
    婚礼方案策划
    <div class="mask">
        情况:待进行<br>
        实行者:张3<br>
        截止时间:2020/03/15
    </div>
</div>
</body>
</html>

总结

以上所述是网编给大伙儿详细介绍的 纯CSS完成电脑鼠标放上拖动出半全透明实际效果的文本表明(初学者小白 必看),期待对大伙儿有一定的协助!