溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

純CSS如何實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果

發(fā)布時(shí)間：2021-03-18 13:52:49 來源：億速云 閱讀：246 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān) 純CSS如何實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

效果如下：

純CSS如何實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果

實(shí)例1

純CSS如何實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果

實(shí)例2以實(shí)例1【婚禮策劃】為例

HTML：

<div class="itemInWorks" >
   婚禮策劃
   <div class="mask">
       狀態(tài)：待完成<br>
       執(zhí)行者：張三<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;/*周圍陰影*/
    /*以上根據(jù)個(gè)人的效果自定義*/
    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;
    /*以上根據(jù)個(gè)人的效果自定義*/
    position: absolute;
    top:130px;/*鼠標(biāo)不放時(shí)，半透明部分最高處離外層div頂端的距離*/
    background-color:rgba(0,0,0,0.5);/*透明度*/
    transition:top 0.5s ease-in-out;/*改變top屬性，0.5秒完成，慢開始慢結(jié)束*/
}
.itemInWorks:hover .mask{
    top:50px ;/*鼠標(biāo)放上時(shí)，滑動(dòng)到的最高處離外層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;
        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">
        狀態(tài)：待完成<br>
        執(zhí)行者：張三<br>
        截止日期：2020/03/15
    </div>
</div>
</body>
</html>

感謝各位的閱讀！關(guān)于“ 純CSS如何實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手