Question

我设置了CSS3动画，我只想在悬停时制作它。

        .pinkBg {
    background-color: #ed184f!important;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
    height:60px;
    width:60px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-30px 0 0 -30px;
    border-radius:100px;
    z-index:1
}
.intro-banner-vdo-play-btn i{
    line-height:56px;
    font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
    <div class="row">
        <div class="container">
    <div class="row">
    <a href="www.google.fr" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>
    </div>
</div>

</div>
</div>
</body>
</html>

Answer 1

您可以通过更改悬停时的animation-name尝试以下操作

.pinkBg {
  background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}

.intro-banner-vdo-play-btn {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: -30px 0 0 -30px;
  border-radius: 100px;
  z-index: 1
}

.intro-banner-vdo-play-btn i {
  line-height: 56px;
  font-size: 30px
}

.intro-banner-vdo-play-btn .ripple {
  position: absolute;
  width: 160px;
  height: 160px;
  z-index: -1;
  left: 50%;
  top: 50%;
  opacity: 0;
  margin: -80px 0 0 -80px;
  border-radius: 100px;
  animation: noname 0.9s;
}

.intro-banner-vdo-play-btn .ripple:nth-child(2) {
  animation-delay: .3s;
}

.intro-banner-vdo-play-btn .ripple:nth-child(3) {
  animation-delay: .6s;
}

.intro-banner-vdo-play-btn:hover .ripple {
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0)
  }
  100% {
    opacity: 0;
    transform: scale(1)
  }
}

<a href="www.google.fr" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
  <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
  <span class="ripple pinkBg"></span>
  <span class="ripple pinkBg"></span>
  <span class="ripple pinkBg"></span>
</a>

悬停时的关键帧脉冲动画

1 个答案: