按钮边框动画

最新推荐文章于 2025-01-21 13:39:34 发布

前端攻城狮？

最新推荐文章于 2025-01-21 13:39:34 发布

阅读量198

点赞数 3

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/Zhwsy/article/details/135865827

版权

<template>
    <div class="container">
        <el-button class="btn">按钮</el-button>
    </div>
</template>

<style lang="scss" scoped>
.btn {
    width: 100px;
    height: 40px;
    border: none;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    cursor: pointer;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: #409EFF;
        z-index: -2;
        animation: identifier 3s linear infinite;
    }

    &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 96px;
        height: 36px;
        background-color: #fff;
        z-index: -1;
    }
}

@keyframes identifier {
    0% {
        transform-origin: top left;
        transform: rotate(0deg);
    }

    100% {
        transform-origin: top left;
        transform: rotate(360deg);
    }

}
</style>