xuchang-new/src/components/Common/Arrow/index.module.css
2024-01-25 15:19:27 +08:00

61 lines
1005 B
CSS

.arrow {
appearance: none;
outline: none;
border: none;
background: transparent;
width: 16px;
height: 48px;
position: absolute;
top: 112px;
left: 5px;
cursor: pointer;
z-index: 10;
}
.arrow.disabled > div {
background: #3d4a56;
}
.arrow__right {
left: unset;
right: 5px;
}
.arrow:hover > div {
background: #00f3ed;
}
.arrow-top {
transition: background 0.1s ease-out;
background: #1eaba9;
width: 8px;
height: 24px;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transform: rotateZ(20deg) translateY(2px) translateX(4px);
}
.arrow-bottom {
transition: background 0.1s ease-out;
background: #1eaba9;
width: 8px;
height: 24px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 12px;
transform: rotateZ(-20deg) translateY(-2px) translateX(4px);
}
.arrow-top__right {
transform: rotateZ(-20deg) translateY(4px) translateX(4px);
}
.arrow-bottom__right {
transform: rotateZ(20deg) translateY(-4px) translateX(4px);
}