按钮边框旋转效果

最新推荐文章于 2025-12-09 13:48:31 发布

原创最新推荐文章于 2025-12-09 13:48:31 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

该文章展示了一段CSS代码，用于创建一个黑色背景的按钮，具有白色边框和旋转动画效果。按钮在页面中居中显示，尺寸为300px*100px，使用伪元素`::before`和`::after`实现了动画边框效果。

<body>
    <button>边框按钮</button>
</body>
<style>
    body{
        background-color: #000;
    }
    button{
        display: block;
        width: 300px;
        height: 100px;
        margin: 200px auto;
        color: #0ebeff;
        font-size: 24px;
        background: #000;
        border: none;
        outline: none;
        z-index: 1;
        border-radius: 10px;
        /* outline: 4px solid #fff; */
        position: relative;
        overflow: hidden;
    }
    button::before{
        content: '';
        position: absolute;
        background: #f40;
        width: 200%;
        height: 200%;
        z-index: -2;
        left: 50%;
        top: 50%;
        transform-origin: 0 0;
        animation: rotate 3s infinite linear;
    }
    button::after{
        content: '';
        position: absolute;
        background: #000;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        left: 2px;
        top: 2px;
        border-radius: 10px;
        z-index: -1;
    }
    @keyframes rotate {
        to {
            transform: rotate(1turn);
        }
    }
</style>