CSS - 转换

Question

HTML

\<div class="buttonFrame"\>\<div class="btn"\>\</div\>\</div\>

CSS

.buttonFrame {
        position: relative;
        width: 55px;
        height: 20px;
        border-radius: 12px;
        border: 2px solid black;
        overflow: hidden;
        top: 30%;
        left: 45%;
        z-index: 100px;
      }
      .btn {
        border-radius: 12px;
        width: 0%;
        height: 0%;
        background: linear-gradient(
          90deg,
          rgba(2, 0, 36, 1) 0%,
          rgba(9, 9, 121, 1) 35%,
          rgba(6, 78, 166, 1) 57%,
          rgba(3, 134, 203, 1) 75%,
          rgba(2, 156, 218, 1) 82%,
          rgba(0, 212, 255, 1) 100%
        );
        background-position: 0 0;
        transition: width 2s, height 2s; /* Added height transition */
      }

      .buttonFrame:hover .btn {
        /* Changed to target .btn on hover of .buttonFrame */
        width: 100%; /* Adjusted width for hover effect */
        height: 100%; /* Adjusted height for hover effect */
        background-position: 0 0;
        /* transform: scaleX(2); */
      }

过渡效果是从左上角核心开始，但需要从左上角开始

我尝试了互联网和人工智能的几种方法，但没有任何效果。基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。

Answer 1

正如 A Haworth 在评论中提到的，仅在悬停和过渡时设置

height

会使其从 0 更改为 100%。您可以将其删除并将

height

添加到按钮。

另外，

z-index

没有计量单位，应该是

z-index:100;

保留您的代码：

.buttonFrame {
  position: relative;
  width: 55px;
  height: 20px;
  border-radius: 12px;
  border: 2px solid black;
  overflow: hidden;
  top: 30%;
  left: 45%;
  /* z-index: 100px; */
  z-index: 100;
}

.btn {
  border-radius: 12px;
  width: 0%;
  height: 0%;
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
  background-position: 0 0;
  /* transition: width 2s, height 2s; */
  transition: width 2s;
  height: 100%;
}

.buttonFrame:hover .btn {
  width: 100%;
  /* height: 100%; */
  /* background-position: 0 0; */
}

<div class="buttonFrame">
  <div class="btn"></div>
</div>

请注意，您可以使用

after

用一个元素来制作它。这是仅包含所需属性的片段。

.btn {
  width: 55px;
  height: 20px;
  border: 2px solid black;
  overflow: hidden;
}

.btn,
.btn:after {
  border-radius: 12px;
}

.btn:after {
  display: block;
  content: "";
  width: 0%;
  transition: width 2s;
  height: 100%;
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
}

.btn:hover:after {
  width: 100%;
}

<div class="btn"></div>