按钮边框旋转效果

使用css中的transform属性写一个有意思的按钮边框

首先在你的html中写入一个按钮标签

<button>边框按钮</button>

在style标签中写入下面的样式

body{
  background-color: #000;
}
button{
  display: inline-block;
  font-size: 24px;
  color: #0ebeff;
  background-color: #000;
  border:none;
  z-index: 1;
  border-radius: 10px;
  padding: 10px;
  outline:4px solid #fff;
}

这时你页面应该会有一个这样的一个按钮

再给button加一个相对定位

button{
  display: inline-block;
  font-size: 24px;
  color: #0ebeff;
  background-color: #000;
  border:none;
  z-index: 1;
  border-radius: 10px;
  padding: 10px;
  outline:4px solid #fff;
  + position: relative;//新添加的
}

给button加一个伪类作为要旋转的元素

button::before{
  content: '';
  position: absolute;
  background-color: #f40;
  width: 200%;
  height: 200%;
}

这个时候页面是这样的

咱们让这个文字显示出来并将这个悬浮元素的左上角在按钮的中心位置显示添加下面三行代码

button::before{
  content: '';
  position: absolute;
  background-color: #f40;
  width: 200%;
  height: 200%;
  //下面三个是新添加的
  z-index: -2;//改变元素层级
  left: 50%;
  top: 50%;
}

效果如下 开始定义一个动画

@keyframes rotate{
  to{
    transform: rotate(1turn);
  }
}

这里的rotate(1turn)中的1turn相当于1圈、就是360deg、等价于transform: rotate(360deg)

再给这个伪类添加上刚刚定义的动画rotate让它旋转起来

button::before{
  ...
  transform-origin: 0 0;//定义旋转中心
  animation: rotate 3s infinite linear;
}

这个时候是旋转起来了可不是咱们最终要的结果咱们只要他的边框那部分旋转其余地方隐藏起来

button{
 ...
 /* outline:4px solid #fff; */删除这一行
 overflow: hidden;//益处隐藏
}
button::after{
  content: '';
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #000;
  left: 2px;
  top: 2px;
  border-radius: 10px;
  z-index: -1;
}

到了这里不出意外一个带有动画的边框就做好了 下面放了代码片断提供参考

每天积累一点点 扫码关注公众号 一起慢慢成长...