css探照灯效果

天空之枫

已于 2022-11-22 17:24:02 修改

阅读量296

点赞数

分类专栏： css 文章标签： css html 前端

于 2022-11-22 17:12:06 首次发布

本文链接：https://blog.csdn.net/sinat_24713805/article/details/127986370

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

就是这种效果

<div class="itemLi itemLiactive">

</div>

.itemLi{
            text-decoration: none;
            line-height: 52px;
            list-style-type: none;
            cursor: pointer;
            display: inline-block;
            max-width: 112px;
            flex: 1;
            height: 61px;
            margin: 11px 10px 0 10px;
            position: relative;
            .bottombutton{
                margin:0 auto;
                display:inline-block;
                font-size:16px;
                width:100%;
                height:52px;
                line-height:56px;
                text-align:center;
                color: rgba(255, 255, 255, 0.4);
            }
            
            // background: rgba(0, 0, 0, 0);
            // background-size: cover;
            // background-repeat: no-repeat;
            &:hover{
                .bottombutton{
                    color: rgba(255, 255, 255, 1)!important;
                }
                background: linear-gradient(0deg, #FFf 2px, rgba(255, 255, 255, 0) 2px), linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 19px);
                &::after{
                        content: '';
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-color: #266CFF transparent;
                        border-width: 0px 0px 31px 14px;
                        border-style: solid;
                        position: absolute;
                        right: 0;
                        bottom: 0px;
                    // position: absolute;
                    // bottom:-9px;
                    // right: calc(50% - 32px);
                    // width: 64px;
                    // height: 2px;
                    // content: '';
                    // background-color: #fff;
                }
                &::before{
                    position: absolute;
                    content: '';
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-color: #266CFF transparent;
                    border-width: 0px 14px 31px 0;
                    border-style: solid;
                    bottom: 0px;
                }
            }
            .childlistUlbotton{
                position: absolute;
                top: 65px;
                left: -18px;
                text-align: left;
                height: 0px;
                background: #fff;
                box-shadow: 0px 3px 6px rgba(0,0,0,0.18);
                overflow: hidden;
                transition: height .2s;
                // margin-left: 170px;
                .childitemLi{
                    text-decoration: none;
                    line-height: 52px;
                    list-style-type: none;
                    cursor: pointer;
                    display: inline-block;
                    width: 148px;
                    height: 52px;
                    .childbottombutton{
                        margin:0 auto;
                        display:inline-block;
                        font-size:16px;
                        width:100%;
                        height:52px;
                        line-height:56px;
                        text-align:center;
                        color: rgba(0,0,0);
                    }
                    &:hover{
                        .childbottombutton{
                            font-weight: bold;
                            color:#266CFF!important;
                        }
                    }
                }
                .childitemLiactive{
                    font-weight: bold;
                    color: #266CFF;
                }
                
            }
        }