8项目通关前端/美团网布局项目13：项目优化

@给盒子加阴影

box-shadow: 0 2px 27px 0 rgb(0 0 0 / 10%);

知识传送门 盒子阴影

@伪元素小装饰

li.hot::after {
    /* 伪元素内容 */
    content: "HOT";

    /* 字体样式 */
    color: white;
    font-size: 12px;

    /* 盒子样式 */
    display: inline-block;
    background-color: #ff4848;
    padding: 1px 5px;
    margin-left: 2px;
    border-radius: 8px;

    /* 利用定位校正一下位置 */
    position: relative;
    top: -5px;
}

@伪元素指示器

/* li元素激活或被鼠标覆盖时 都加三角形指示器 */
.title-box>ul>li.active::after,
.title-box>ul>li:hover::after {

    /* 内容 */
    content: " ";

    /* 盒子属性 */
    display: block;
    width: 2px;
    height: 0;

    /* 左右边框虽然为透明，但会将底边框的左右两角修剪为梯形 */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #fff;

    /* 校正位置 */
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    margin: auto;
}

原理解释

@鼠标覆盖时出现元素

• 豆腐块未被鼠标hover时，按钮显示为透明底+透明字；

>.btn {
    ...
    
    /* 黑底白字 默认全透明不可见 */
    background-color: #0000;
    color: #fff0;
    font-size: 20px;
    
    ...
}

• 豆腐块被鼠标hover时，按钮显示为黑底+白字；

/* 豆腐1之已hover */
>.toufu1:hover {
    >.btn {
        // 默认不显示 我爹被hover时才显示
        // display: block;

        /* 通过恢复透明度令元素可见 */
        background-color: #0008;
        color: #ffff;
    }
}

• btn样式变化时加过渡动画

>.btn {
    ...

    /* 
    transition = 过渡动画
    all = 所有样式
    0.5s/.5s = 半秒时间
    linear = 匀速变化 
    */
    transition: all .5s linear;
}

@给海报添加遮罩阴影

• 丢一个遮罩层位于海报层上方底部；
• 给该遮罩层一个由半黑到透明的渐变色；
• 这样白色文字在黑色底衬上就更加清晰可见了！

.mask {

    /* 满宽100高 */
    height: 100px;
    width: 100%;

    /* 定位在电影海报的底部 */
    position: absolute;
    bottom: 0;

    /* 
    -180deg                     渐变方向从上至下
    rgba(0,0,0,0.00) 0%         最顶部为全透明黑色
    rgba(29,45,55,0.80) 99%,    最底部为半透明黑色
    */
    background-image: linear-gradient(
        -180deg, 
        rgba(0,0,0,0.00) 0%, 
        rgba(29,45,55,0.80) 99%
    );
}

@知识链接

极简页面布局知识手册

@获取源码

猛戳此处获取老师源码！ 更高处见！