主页 / 建站知识 /

纯CSS实现鼠标放上滑动出半透明效果的文字说明

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

效果如下

实例1

实例2以实例1【婚礼策划】为例

HTML

<div class="itemInWorks" >
   婚礼策划
   <div class="mask">
       状态待完成<br>
       执行者张三<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;
    :130px;/鼠标不放时，半透明部分最高处离外层div顶端的距离/
    background-color:rgba(0,0,0,0.5);/透明度/
    transition: 0.5s ease-in-out;/改变属性，0.5秒完成，慢开始慢结束/
}
.itemInWorks:hover .mask{
    :50px ;/鼠标放上时，滑动到的最高处离外层div顶端的距离/
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
        :130px;
        background-color:rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    }
    .itemInWorks:hover .mask{
        :50px ;
    }
</style>
<body>
<div class="itemInWorks" >
    婚礼策划
    <div class="mask">
        状态待完成<br>
        执行者张三<br>
        截止日期2020/03/15
    </div>
</div>
</body>
</html>

以上所述是长沙网络推广给大家介绍的 纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)，希望对大家有所帮助！

上一篇：css中有序无序列表项list样式设置方法 下一篇：在Firefox浏览器中利用CSS窃取数据

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by