CSS按钮边框旋转效果

最新推荐文章于 2024-05-18 03:07:39 发布

程序员小蜗

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量217

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51958960/article/details/132239600

版权

<div class="buttons">按钮</div>


.buttons {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* border: 3px solid transparent; */
  border-radius: 5px;
  position: relative;
  /* overflow: hidden; */
  margin-top: 30px;
  margin-left: 30px;
  outline: 4px solid #fff;
}
.buttons::before {
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  background: red;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  animation: rotate 2s infinite linear;
}
.buttons::after {
  content: "";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #fff;
  border-radius: 5px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
}