vue3边框流光特效

最新推荐文章于 2024-05-21 18:11:13 发布

燕京拾亿

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量1.4k

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_59074147/article/details/126941483

版权

<template>
  <div class="item" info="质感边框">
  <div></div>
</div>

</template>

 <style lang="less" scoped>
 @keyframes opacityChange {
    50% {
        opacity:.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}
div.item {
  width: 500px;
  height: 500px;
    div{ 
        --borderWidth: 12px;
        --bRadius: 10px;
        width: 60%;
    height: 60%;
        position: relative;
        z-index: 0;
        overflow: hidden;
        z-index: 0;
        border-radius: --bRadius;
        &::after, &::before {
            box-sizing: border-box;
        }
        &::before {
            content: '';
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-color: #1a232a;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
            animation: rotate 4s linear infinite;
        }
	
        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: calc(var(--borderWidth) / 2);
            top: calc(var(--borderWidth) / 2);
            width: calc(100% - var(--borderWidth));
            height: calc(100% - var(--borderWidth));
            background: #000;
            border-radius: 5px;
            /* 这句效果打开有助于理解动画 */
            /*animation: opacityChange 5s infinite linear;*/
        }
        
    }
}



 </style>