开发者社区云计算文章正文

transform实现按钮边框旋转效果

2023-12-20 21

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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
}