사람인 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
.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;
}
|
cs |
'css trick & base' 카테고리의 다른 글
레이어팝업 하단 고정 스크롤 (0) | 2024.09.04 |
---|---|
라운드 이미지 뱃지 (0) | 2024.09.04 |
animate.css aos 에니메이션 효과주기 (1) | 2024.07.24 |
라운드 마스킹 border-radius 위아래형 이미지 아닌 css로만 (0) | 2024.06.13 |
flex gap을 써서 간격 조절하는법 (0) | 2024.06.07 |