사람인 swiper 라운드 트렌지션

사람인 ui는 디자인이 너무 이쁜거같다

디자인 개편하기 전에 미리 소스를 확인해봤다

 

***********스와이퍼 현재 화면에서 활성화됐을때 글자박스가 밑에서 위로 올라오게

#1. 스와이퍼 엑티브 되기전

.platinum-plus .desc > * {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#2. 스와이퍼 엑티브됐을때
.platinum-plus .slide.swiper-slide-active .desc > * {
    opacity: 1;
    transform: none;
}

 

 

 

.platinum-plus__logo {
    position: absolute;
    right: -8px;
    top: -8px;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
    justify-content: center;
    padding-top: 12px;
    padding-left: 8px;
    width: 118px;
    height: 74px;
    background-image: url(00.svg);
}
.platinum-plus__logo .logo {
    display: flex;
    width: 70px;
    height: 32px;
    object-fit: contain;
    object-position: center;
}
.platinum-plus .slide .desc {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    gap: 8px;
    border-radius: 16px;
    bottom: 12px;
    left: 12px;
    width: 236px;
    height: 156px;
    box-sizing: border-box;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.02);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}
.platinum-plus .rec__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(27px);
    backdrop-filter: blur(27px);
    color: #fff;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.platinum-plus .slide.swiper-slide-active .rec__tag {
    opacity: 1;
    transform: none;
    transition-delay: 0.4s;
}