archives/src/global/components/hc-border-neon/index.vue

<template>
    <div class="hc-border-neon" :class="[isAlign, isNeon ? 'is-neon':'']">
        <i class="top"/>
        <i class="bottom"/>
        <i class="left"/>
        <i class="right"/>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";

const props = defineProps({
    align: {
        type: String,
        default: 'left'
    },
    neon: {
        type: Boolean,
        default: false
    },
})

const isAlign = ref(props.align)
const isNeon = ref(props.neon)

//监听
watch(() => [
    props.align,
    props.neon,
], ([val, neon]) => {
    isAlign.value = val
    isNeon.value = neon
})
</script>

<style lang="scss">
html.dark {
    .hc-border-neon {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: inherit;
        overflow: hidden;
        i.top {
            position: absolute;
            top: 0;
            right: -100%;
            height: 2px;
            width: 100%;
            background-image: linear-gradient(
                    270deg,
                    transparent,
                    #03e9f4,
                    transparent
            );
        }
        i.bottom {
            position: absolute;
            bottom: 0;
            left: -100%;
            height: 2px;
            width: 100%;
            background-image: linear-gradient(
                    270deg,
                    transparent,
                    #03e9f4,
                    transparent
            );
        }
        i.left {
            position: absolute;
            width: 2px;
            height: 100%;
            top: -100%;
            left: 0;
            background-image: linear-gradient(
                    0deg,
                    transparent,
                    #03e9f4,
                    transparent
            );
        }
        i.right {
            position: absolute;
            width: 2px;
            height: 100%;
            bottom: -100%;
            right: 0;
            background-image: linear-gradient(
                    360deg,
                    transparent,
                    #03e9f4,
                    transparent
            );
        }
        &.left {
            i.left {
                animation: hc-border-neon-two 4s linear 1s infinite;
            }
            i.bottom {
                animation: hc-border-neon-one 4s linear 2s infinite;
            }
            i.right {
                animation: hc-border-neon-four 4s linear 3s infinite;
            }
            i.top {
                animation: hc-border-neon-three 4s linear infinite;
            }
            &.is-neon {
                i.left {
                    bottom: -100%;
                    right: initial;
                    top: initial;
                    left: 0;
                    animation: hc-border-neon-four 4s linear 1s infinite;
                }
                i.top {
                    left: 0;
                    right: initial;
                    bottom: initial;
                    animation: hc-border-neon-one 4s linear 2s infinite;
                }
                i.right {
                    top: 0;
                    bottom: initial;
                    animation: hc-border-neon-two 4s linear 3s infinite;
                }
                i.bottom {
                    bottom: 0;
                    left: initial;
                    right: -100%;
                    animation: hc-border-neon-three 4s linear infinite;
                }
            }
        }
        &.right {
            i.right {
                animation: hc-border-neon-four 4s linear 1s infinite;
            }
            i.top {
                animation: hc-border-neon-three 4s linear 2s infinite;
            }
            i.left {
                animation: hc-border-neon-two 4s linear 3s infinite;
            }
            i.bottom {
                animation: hc-border-neon-one 4s linear infinite;
            }
            &.is-neon {
                i.left {
                    bottom: -100%;
                    right: initial;
                    top: initial;
                    left: 0;
                    animation: hc-border-neon-four 4s linear 3s infinite;
                }
                i.right {
                    top: 0;
                    bottom: initial;
                    animation: hc-border-neon-two 4s linear 1s infinite;
                }
                i.top {
                    left: 0;
                    right: initial;
                    bottom: initial;
                    animation: hc-border-neon-one 4s linear infinite;
                }
                i.bottom {
                    bottom: 0;
                    left: initial;
                    right: -100%;
                    animation: hc-border-neon-three 4s linear 2s infinite;
                }
            }
        }
    }
}

@keyframes hc-border-neon-one {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}

@keyframes hc-border-neon-two {
    0% {
        top: -100%;
    }
    50%,
    100% {
        top: 100%;
    }
}

@keyframes hc-border-neon-three {
    0% {
        right: -100%;
    }
    50%,
    100% {
        right: 100%;
    }
}

@keyframes hc-border-neon-four {
    0% {
        bottom: -100%;
    }
    50%,
    100% {
        bottom: 100%;
    }
}
</style>