st-common-ui-vue3/es/components/StDynamicBorder1/StDynamicBorder1.css

小尾巴通用 Vue3 UI 组件库

@property --st-dynamic-border-1-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes st-dynamic-border-1-rotate-11e3951c{0%{--st-dynamic-border-1-angle: 0deg}to{--st-dynamic-border-1-angle: 360deg}}.st-dynamic-border-1[data-v-11e3951c]{position:relative;box-sizing:border-box;padding:var(--border-width);border-radius:var(--border-radius)}.st-dynamic-border-1[data-v-11e3951c]:before,.st-dynamic-border-1[data-v-11e3951c]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:var(--border-radius)}.st-dynamic-border-1 .st-dynamic-border-1__content[data-v-11e3951c]{z-index:1;position:relative;width:100%;height:100%;border-radius:var(--border-radius)}.st-dynamic-border-1--border-color-default[data-v-11e3951c]:before,.st-dynamic-border-1--border-color-default[data-v-11e3951c]:after,.st-dynamic-border-1--border-color-default--hover[data-v-11e3951c]:hover:before,.st-dynamic-border-1--border-color-default--hover[data-v-11e3951c]:hover:after{background-image:conic-gradient(from var(--st-dynamic-border-1-angle),var(--border-color-list) 360deg,transparent 360deg)}.st-dynamic-border-1--border-color-custom[data-v-11e3951c]:before,.st-dynamic-border-1--border-color-custom[data-v-11e3951c]:after,.st-dynamic-border-1--border-color-custom--hover[data-v-11e3951c]:hover:before,.st-dynamic-border-1--border-color-custom--hover[data-v-11e3951c]:hover:after{background-image:var(--border-color)}.st-dynamic-border-1--shine[data-v-11e3951c]:after,.st-dynamic-border-1--shine--hover[data-v-11e3951c]:hover:after{filter:blur(var(--shine-range));opacity:var(--shine-brightness)}.st-dynamic-border-1--rotate[data-v-11e3951c]:before,.st-dynamic-border-1--rotate[data-v-11e3951c]:after,.st-dynamic-border-1--rotate--hover[data-v-11e3951c]:hover:before,.st-dynamic-border-1--rotate--hover[data-v-11e3951c]:hover:after{animation:st-dynamic-border-1-rotate-11e3951c var(--speed) linear infinite}.st-dynamic-border-1--hover-pause[data-v-11e3951c]:hover:before,.st-dynamic-border-1--hover-pause[data-v-11e3951c]:hover:after{animation-play-state:paused}