使用css 让按钮、容器边框线移动旋转

最新推荐文章于 2024-04-02 09:52:48 发布

已入陆地神仙

最新推荐文章于 2024-04-02 09:52:48 发布

阅读量596

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_43604182/article/details/126349111

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

让按钮、容器边框线移动旋转

在这里插入图片描述

<div class="button"><p>动画</p></div>

.button{
        margin: 40px;
        background: #000;
        padding: 8px 15px;
        color: #FFF;
        cursor: pointer;
        /* border: 1px solid #000; */
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        width: 100px;
        height: 60px;
    }
    .button>p{
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        z-index: 3;
        font-size: 18px;
    }
    .button::after{
        z-index: 1;
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        top:50%;
        left: 50%;
        background: rgb(5, 255, 97);
        animation: rotate 2s linear infinite;
        transform-origin: 0 0;

    }
    .button::before{
        z-index: 2;
        content: "";
        position: absolute;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        border-radius: 7px;
        background: #000;

    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }