7

我正在尝试使 div 闪烁，但我不希望其中的文本闪烁，而只是按钮本身。我不确定如何解决这个问题。我希望这是有道理的，有人可以帮忙吗？

这是代码：

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Opera */

.download {
    background-color: red;
    padding: 15px 15px 15px 15px;
    text-align:center;
    margin-bottom: 4px;
    font-size: 24px;
    border-radius: 5px;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out; 
    -moz-animation:blink normal 1.5s infinite ease-in-out; /* Firefox */
    -webkit-animation:blink normal 1.5s infinite ease-in-out; /* Webkit */
    -ms-animation:blink normal 1.5s infinite ease-in-out; /* IE */
    animation:blink normal 1.5s infinite ease-in-out; /* Opera */
}
<div class="download">DOWNLOAD TRIAL</div>

4

2 回答 2

23 

@keyframes blink {
    0% {
           background-color: rgba(255,0,0,1)
    }
    50% {
           background-color: rgba(255,0,0,0.5)
    }
    100% {
           background-color: rgba(255,0,0,1)
    }
}
@-webkit-keyframes blink {
    0% {
           background-color: rgba(255,0,0,1)
    }
    50% {
           background-color: rgba(255,0,0,0.5)
    }
    100% {
           background-color: rgba(255,0,0,1)
    }
}

 .download {

    padding: 15px 15px 15px 15px;
    text-align:center;
    margin-bottom: 4px;
    font-size: 24px;
    border-radius: 5px;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    -moz-animation:blink normal 1.5s infinite ease-in-out;
    /* Firefox */
    -webkit-animation:blink normal 1.5s infinite ease-in-out;
    /* Webkit */
    -ms-animation:blink normal 1.5s infinite ease-in-out;
    /* IE */
    animation:blink normal 1.5s infinite ease-in-out;
    /* Opera */
}
<div class="download">
    <h1>DOWNLOAD</h1>
</div>

opacity将影响 div 及其所有子项。我怀疑您需要的是带有 alpha（透明度）组件的背景颜色。所以...在背景上使用 RGBA 颜色

于 2014-11-20T11:52:57.960 回答
3

几年后，你可以使用这个可爱的眨眼和淡入淡出效果

.blink {
    -webkit-animation: blink 2s infinite both;
            animation: blink 2s infinite both;
}

@-webkit-keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
<div class="blink">FADE AND BLINK!</div>

于 2021-04-16T01:11:14.057 回答