CSS transform实现按钮边框旋转效果

最新推荐文章于 2024-04-29 16:11:31 发布

我是 · 闪电

最新推荐文章于 2024-04-29 16:11:31 发布

阅读量190

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_58050016/article/details/128502471

版权

<template>
  <div class="box">
    <div class="button">按钮</div>
  </div>
</template>
<style>
.box {
  display: flex;
  justify-content: center;
}
.button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* border: 3px solid #000; */
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.button::before {
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  background: red;
  z-index: -2;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  animation: rotate 2s infinite linear;
}
.button::after {
  content: "";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: rgb(255, 255, 255);
  border-radius: 5px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: -1;
}
</style>