Bilibili-Evolved/registry/lib/components/style/home-redesign/fresh/_effects.scss
2022-03-08 23:37:24 +08:00

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;
}