Question

很抱歉noob问题，但是我在这里看到的唯一答案是针对JavaScript动画而不是纯CSS动画的。我想要一个按钮，然后有一个发光动画。该按钮是一个链接，因此我将其作为定位标记。

当我将鼠标悬停在按钮上时，它消失了。

将翻转动画的不透明度设置为1可以解决此问题，因此我认为它会回到不透明度：病房后为0。

body {
  background-color: black;
}
a {
  text-decoration: none;
}

a.discord-button {
  flex: 0;
  margin: 0 auto;
  border: 4px solid #fefffe;
  color: #fefffe;
  padding: .75em 2.25em;
  background: transparent;
  font-weight: 600;
  font-style: italic;
  font-size: 18pt;
}

a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.8) 30%, #000 50%, rgba(0,0,0,.8) 70%);
  -webkit-mask-size: 200%;
  mask-image: linear-gradient(-75deg, rgba(0,0,0,.8) 30%, #000 50%, rgba(0,0,0,.8) 70%);
  mask-size: 200%;
  animation: shine 1.5s infinite;
  background-color: #131313;
  transition: background-color .2s ease-in-out;
}

发光

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
    mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
    mask-position: -50%;
  }
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

插入式

.flip-in-hor-bottom {
    -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
            animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-6-14 10:36:2
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-hor-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}

HTML

<a class="discord-button effect-shine flip-in-hor-bottom" href="#">Join Discord</a>

加载动画会导致鼠标悬停动画CSS之后按钮消失

0 个答案: