Html 如何在div中淡入和淡出渐变背景

.base-action-card {
  padding: 1rem;
  position: relative;
  z-index: 0;
  height: 200px; /* only one height definition is needed */
  width: 200px; /* only one width definition is needed */
  aspect-ratio: 16/9;
  border-radius: 10px;
  cursor: pointer;
  background: white;


  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 2px; /* Set the width of the "border" */
    border-radius: 10px;
    background: linear-gradient(180deg, #1FC1FA 0%, #4b67f2 100%);
    opacity: 0; /* Start fully transparent */
    transition: opacity 0.3s; /* Transition the opacity */
    visibility: hidden; /* Start as hidden */
  }

  /* Keep your existing ::before for the gradient border */
  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    padding: 2px; /* Set the width of the "border" */
    border-radius: 10px; /* Match the border-radius of the container */
    background: linear-gradient(180deg, #1FC1FA 0%, #4b67f2 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  &:hover::after, &:active::after {
    opacity: 1; /* Fully visible on hover */
    visibility: visible; /* Make visible on hover */
  }
}

<div class="base-action-card"></div>