WEB每日一练——transform实现按钮边框旋转效果

按钮边框旋转效果该如何实现呢？

首先我们需要一个按钮

color:#0ebeff;
font-size:24px;
background:#000;
border:none;
outline:none;
z-index:1;
border-radius:10px;
overflow:hidden;

然后给这个按钮加上相对定位

position:relative;

为什么要加上定位呢？

因为按钮里边转来转去的那个东西实际上是相对定位的。

这个东西其实是一个伪元素，一个绝对定位的伪元素。

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;
}

然后加上动画效果：

#keyframes rotate {
    to {
        transform:rotate(1turn)
    }
}

然后再设置第二个伪元素：

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
}

即可实现效果