css 实现div线条环绕

最新推荐文章于 2023-11-17 07:00:00 发布

背书包的甜瓜

最新推荐文章于 2023-11-17 07:00:00 发布

阅读量356

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/dashanjv/article/details/133894908

版权

<template>
    <div>
        <div class="mainbox">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <div class="content" @click="sss">线条环绕</div>
        </div>
        <br><br>
    </div>
</template>

<script lang="ts" setup>
const sss = ()=>{
    console.log('----');
    
}
</script>

<style lang="scss" scoped>
.mainbox {
    width: 320px;
    height: 320px;
    position: relative;
    /* 超出隐藏需要加上 */
    overflow: hidden;
}

.content {
    width: 100%;
    height: 100%;
    background-color: #cde;
}

.line {
    /* 结合外层元素的相对定位 */
    position: absolute;
}

.line:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* 加上渐变效果，方可形成拖尾效果 */
    background: linear-gradient(90deg, transparent, orange);
    animation: animate1 8s linear infinite;
}

/* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.line:nth-child(2) {
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, red);
    animation: animate2 8s linear infinite;
    /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
    animation-delay: 2s;
}

@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

.line:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, green);
    animation: animate3 8s linear infinite;
    animation-delay: 4s;
}

@keyframes animate3 {
    0% {
        right: -100%;
        height: 3px;
    }

    50%,
    100% {
        height: 2px;
        right: 100%;
    }
}

.line:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 8s linear infinite;
    animation-delay: 6s;
}

@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}
</style>