css技巧

• 实现一个毛玻璃效果

    .user-img{
        background-image: url(...)
        background-size: cover
    }
    
    .user-blur {
        width: 100%;
        height: 100%;
        backdrop-filter: blur(12px);
    }

• 实现走马灯

    @keyframes carouse {
        0% {
            transform: translate(0, 0)
        }
        
        100% {
            transform: translate(-100%, 0)
        }
    }
    .slider-wrap {
        animation: carouse 10s liner infinite;
        transition: transform 0.3s ease-out;
    }

• 实现兼容小屏幕

    @media(max-width: 1200px) {
        .item {
            width: 56px
        }
    }