完成蒙层，以及两个动画（Day：43）

[XJQ124]

任务：实现蒙层及其上面的动画

---

地址：https://github.com/XJQ124/Behance 在线网页地址：https://xjq124.github.io/Behance/

1、首先是在jsx文件中写好

 <div >
                                <div className='mark'>
                                    <div>
                                        <img src={photo.src} alt={'这是图片'} style={{ width: '100%', borderRadius: '4px' }} />
                                        <Button  shape='round' className='button-mark' >
                                            <FolderFilled />
                                            <div style={{ writingMode: 'vertical-rl' }}>保存</div>
                                        </Button>
                                        <img src={Label} alt={'图标'} className='label-mark'/>

                                    </div>

                                </div>

                                <div className='layout'>
                                    <div className='title2' >{photo.title} </div>
                                    <div className='icons' > <img src={Good} alt='Good' style={{ height: '20px' }} />{photo.likes}</div>
                                    <div className='icons'> <img src={View} alt='View' style={{ height: '20px' }} />{photo.views}</div>
                                </div> 
                                <div className='author'>{photo.author}</div>
                            </div>

2、css文件对应

/*蒙层的css */
.mark {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.mark:hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(56, 53, 53, 0.5);
}

然后我的button和旁边的标签又是单独做的

.button-mark{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5c5a5a;
    color: white;
    font-size: 12px;
    position: absolute;
    top: 4%;
    /* 将按钮垂直居中 */
    left: 3%;
    /* 不透明度为0，就是看不到*/
    opacity: 0;
}

/* 鼠标悬停时按钮显示 */
.mark:hover .button-mark {
    opacity: 1;
}

.label-mark{
    position: absolute;
    transition: margin-right 2s ease-in-out;
    height: 50px;
    width: 50px;
    top:-5px;
    right: 3%;
    opacity: 0;   

}
.mark:hover .label-mark {
    opacity: 1;
}

3、然后是实现标签的动画

.label-mark:hover {
    transform: translateY(5px);
    opacity: 1;
}

这里需要和上面的的top:-5px;联合才可以实现该效果

效果图：