CSS阴影艺术

单侧阴影

.shadow{
    box-shadow: -7px 0px 5px -5px rgba(0,0,0,0.3);
    height: 50px;
    background-color: #eee;
    width: 50px;
    height: 50px;
}

单侧光影

.side{
    &-wrap{
        width: 500px;
        height: 300px;
        position: relative;
        overflow: hidden;
        background-color: rgba(23, 15, 69, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    &-shadow{
        box-shadow: 0px 0px 40px 10px rgba(58, 255, 222, 1);
        height: 20px;
        background-color: #fff;
        width: 200px;
        animation: clipAnimation 2s infinite ;
    }
    &-shadow-circle{
        box-shadow: 0px 0px 40px 10px rgba(58, 255, 222, 1);
        height: 200px;
        background-color: #fff;
        width: 200px;
        border-radius: 400px;
         clip-path: circle(50px at 110% 100%);
    }
}

@keyframes clipAnimation {
    0% {
        opacity: 0;
        filter: blur(10px);
        clip-path: polygon(-100% 100%, 200% 100%, 200% 100%, -100% 100%);
    }
    100% {
         opacity: 1;
         filter: blur(0);
       clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    }
}

立体阴影

.stereo-shadow{
    width: 380px;
    height: 60px;
    background-color: rgb(255, 204, 21);
    border-radius: 10px;
    position: relative;
    &::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 5%;
        right: 10%;
        bottom: 0;
        border-radius: 10px;
        background-color: hsl(48, 100%, 20%);
        transform: translate(0, -10%) rotate(-4deg);
        transform-origin: center center;
        box-shadow: 0 0 19px 10px hsl(48, 100%, 20%);
        filter: blur(2px);
    }
}

浮雕阴影

浮雕阴影

浮雕阴影

新拟态风格