html 页面加载上的闪烁按钮

Posted 2021-05-11

/* Jacob Lett - https//BootstrapCreative.com - Reference / Refresh / Repetition */

/* Chrome, Safari, Opera */
@-webkit-keyframes example {

  
}

/* Standard syntax */
@keyframes example {
    0%   {border:3px solid gray;}
    50%  {border:3px solid #fff;}
    100% {border:3px solid gray;}
}



.btn {
  border:3px solid gray;
    position: relative;
  animation-delay: 1s;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: .15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: .15s;
    animation-iteration-count: 2;
}

<div class="container">
   <div class="page-header">
      <h1>Animated Button on initial load</h1>
   </div><!--  /page-header  -->
   <a href="" class="btn btn-default">Click Here</a>
</div>