85 lines
1.2 KiB
CSS
85 lines
1.2 KiB
CSS
.onboarding-text {
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 24px 10px 10px;
|
|
height: fit-content;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.cross {
|
|
width: 12px;
|
|
height: 12px;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
rotate: 45deg;
|
|
}
|
|
|
|
.cross::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14px;
|
|
height: 2px;
|
|
background-color: #bdbdbd;
|
|
}
|
|
|
|
.cross::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 2px;
|
|
height: 14px;
|
|
background-color: #bdbdbd;
|
|
}
|
|
|
|
.finger {
|
|
width: 44px;
|
|
margin: 8px 0;
|
|
animation: jump 3s ease infinite;
|
|
}
|
|
|
|
.direction-bottom.finger {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.direction-left.finger {
|
|
rotate: -90deg;
|
|
}
|
|
|
|
.direction-right.finger {
|
|
rotate: 90deg;
|
|
}
|
|
|
|
@keyframes jump {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
15% {
|
|
transform: translateY(-8px);
|
|
}
|
|
30% {
|
|
transform: translateY(7px);
|
|
}
|
|
45% {
|
|
transform: translateY(-6px);
|
|
}
|
|
60% {
|
|
transform: translateY(5px);
|
|
}
|
|
75% {
|
|
transform: translateY(-4px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|