mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
68 lines
1.4 KiB
SCSS
68 lines
1.4 KiB
SCSS
@mixin bounce-x($offset-in-px) {
|
|
@keyframes bounce-x-#{$offset-in-px} {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(#{$offset-in-px}px);
|
|
}
|
|
}
|
|
animation: bounce-x-#{$offset-in-px} 0.4s ease-out;
|
|
}
|
|
@mixin bounce-y($offset-in-px) {
|
|
@keyframes bounce-y-#{$offset-in-px} {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(#{$offset-in-px}px);
|
|
}
|
|
}
|
|
animation: bounce-y-#{$offset-in-px} 0.4s ease-out;
|
|
}
|
|
@mixin scroll-mask-x($mask-width: 24px) {
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
&.not-empty::before,
|
|
&.not-empty::after {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: .1s ease-out;
|
|
width: $mask-width;
|
|
opacity: 1;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
&.not-empty::before {
|
|
background: linear-gradient(to right, var(--home-base-color) 40%, rgba(0, 0, 0, 0) 100%);
|
|
left: -2px;
|
|
}
|
|
&.not-empty::after {
|
|
background: linear-gradient(to left, var(--home-base-color) 40%, rgba(0, 0, 0, 0) 100%);
|
|
right: -2px;
|
|
}
|
|
&.scroll-top::before,
|
|
&.scroll-bottom::after {
|
|
width: 0;
|
|
}
|
|
}
|
|
@mixin item-slides-y($offset: 48px) {
|
|
@keyframes item-slides-y {
|
|
0% {
|
|
transform: translateY($offset);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
animation: item-slides-y paused 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
|
}
|