悬浮贴样式

悬浮贴样式

悬浮贴样式效果图如下：

预览地址：https://www.cnblogs.com/leo130-blogs/p/18251987

html语句:

<div class="sticker" >

    <div class="sticker-title"></div>
    <div class="sticker-detail">
        <div class="sd-sp-time"><span></span></div>
        <div class="sd-sp-Tag"><span></span></div>
    </div>
</div>

CSS样式部分：

<style>
    
.sticker {

    display: block;
    max-width: 180px;
    max-height: 220px;
    background-color: white;
    margin: 10px 10px 60px 10px;
    box-shadow: 0px 12px 12px -1px rgba(0, 0, 0, 0.18);
    border-radius: 20px;   

    transition: 0.3s;
}

.sticker-title {
    display: block;
    width: 180px;
    height: 160px;
    padding-top: 10px;
    border-radius: 20px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.2);
    background: linear-gradient(142.99deg, rgba(217, 217, 217, 0.63) 15.53%, rgba(243, 243, 243, 0.63) 88.19%);

}

.sticker-title span {
    
    user-select: none;
    display: block;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 22px;
    font-weight: 346;
    text-indent: 10px;
}


.sticker-detail {
    height: 15px;
    border-bottom: 1px solid silver;
    border-radius: 30px;
    border-bottom: 60px;
    visibility: hidden;

}

.sticker-detail span {

    display: block;
    padding-top: 4px;
    font-size: 14px;

    /* text-align: right; */

}

.sd-sp-time {
    text-align: right;
    margin-right: 10px;

    font-weight: 120;

}

.sd-sp-Tag {
    text-align: left;
    text-indent: 20px;
}

/*悬浮事件定义*/
.sticker:hover {
    margin: 0px 20px 0px 20px;
    transform: translate(0, -10px);
    box-shadow: 0px 12px 24px -1px rgba(0, 0, 0, 0.18);

    .sticker-detail {
        height: 60px;
        border-bottom: 1px solid silver;
        border-radius: 20px;
        transition: 0.4s;
    }

    .sticker-detail span {

        visibility: visible;
        transition-delay: 0.2s;
    }


}
</style>