st-common-ui-vue3/lib/components/StHoverFleetingContainer/StHoverFleetingContainer.css

小尾巴通用 Vue3 UI 组件库

@property --st-hover-fleeting-container-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes st-hover-fleeting-container-rotate-12810b6e{0%{--st-hover-fleeting-container-angle: 0deg}to{--st-hover-fleeting-container-angle: 360deg}}.st-hover-fleeting-container[data-v-12810b6e]{position:relative;box-sizing:border-box;padding:var(--border-width);border-radius:var(--border-radius)}.st-hover-fleeting-container[data-v-12810b6e]:before,.st-hover-fleeting-container[data-v-12810b6e]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:var(--border-radius);background-image:conic-gradient(from var(--start),var(--border-color) var(--st-hover-fleeting-container-angle),transparent var(--st-hover-fleeting-container-angle),transparent 360deg)}.st-hover-fleeting-container[data-v-12810b6e]:hover:after,.st-hover-fleeting-container[data-v-12810b6e]:hover:before{animation:st-hover-fleeting-container-rotate-12810b6e var(--speed) ease-out forwards}.st-hover-fleeting-container .st-hover-fleeting-container__content[data-v-12810b6e]{z-index:1;position:relative;width:100%;height:100%;border-radius:var(--border-radius)}@keyframes st-hover-fleeting-container-rotate--shine-12810b6e{0%{--st-hover-fleeting-container-angle: 0deg;filter:blur(var(--shine-range-start));opacity:var(--shine-brightness-start)}to{--st-hover-fleeting-container-angle: 360deg;filter:blur(var(--shine-range-end));opacity:var(--shine-brightness-end)}}.st-hover-fleeting-container--shine[data-v-12810b6e]:hover:after{animation:st-hover-fleeting-container-rotate--shine-12810b6e var(--speed) ease-out forwards}.st-hover-fleeting-container--blur-border[data-v-12810b6e]:hover:before,.st-hover-fleeting-container--blur-border[data-v-12810b6e]:hover:after{filter:blur(var(--shine-range-end));opacity:var(--shine-brightness-end);transition-delay:var(--speed);transition-duration:var(--blur-speed)}.st-hover-fleeting-container--blur-border[data-v-12810b6e]:hover:before{opacity:0}