眨眼元素的边界CSS方式

Question

我试图使我的CSS边框眨眼，就像此链接中所示的那样：（ http：//www.multipetros.gr/posts/728-blink-elements-border----css-way）。

但是，我似乎无法在我的网站上使用它。有人可以帮我吗？

谢谢。

我的CSS代码：

.cover-buttons > ul > li:nth-last-child(5) a {
  color: black;
  /*border: 1px solid black;*/
  padding: 14px 18px!important;
  font-weight: 400;
  line-height: 17px;
  font-size: 12px;
  display: inline-block;
  transition: all .2s ease;
  overflow: hidden;
  border-radius: 2px;
  box-sizing: border-box;
  list-style-type: none;
  font-family: 'Varela Round', 'Poppins', sans-serif;
}
@keyframes blink2 { 
   50% { border-color: coral; } 
}
.cover-buttons > ul > li:nth-last-child(5) a {
    animation: blink2 .5s step-end infinite alternate;
}

JS小提琴

https://jsfiddle.net/75nvls4x/24/

Answer 1

您仅定义border-color，您还需要定义border-width和border-style，border:1px solid red;

设置与.cover-buttons>ul>li:nth-last-child(5) a的边界会更好

var href2 = jQuery('.buttons.medium.button-outlined').not('.add-review, .bookmark, .show-dropdown, .sn-share').html();
var link2 = "<a href='" + href2 + "' target='_blank'>Click Here</a>";
jQuery('.buttons.medium.button-outlined').not('.add-review, .bookmark, .show-dropdown, .sn-share').replaceWith(link2);

.cover-buttons>ul>li:nth-last-child(5) a {
  color: black;
  /*border: 1px solid black;*/
  padding: 14px 18px!important;
  font-weight: 400;
  line-height: 17px;
  font-size: 12px;
  display: inline-block;
  transition: all .2s ease;
  overflow: hidden;
  border-radius: 2px;
  box-sizing: border-box;
  list-style-type: none;
  font-family: 'Varela Round', 'Poppins', sans-serif;
}
.cover-buttons>ul>li:nth-last-child(5) a {
  animation: blink2 .5s step-end infinite alternate;
  border: 1px solid transparent;
}
@keyframes blink2 {
  50% {
    border-color: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-cover-content reveal">
  <div class="container">
    <div class="cover-buttons">
      <ul v-pre>
        <li>
          <div class="inside-rating listing-rating button-plain">
            <span class="value">7</span>
            <sup class="out-of">/10</sup>
          </div>
        </li>
        <li>
          <div class="buttons medium button-outlined ">
            https://www.hotmail.com </div>
        </li>
        <li>
          <a href="#add-review" class="buttons button-outlined medium add-review c27-add-listing-review">
            <i class="mi chat_bubble_outline"></i><span class="button-label">Add a comment</span> </a>
        </li>
        <li>
          <a href="#" data-listing-id="211" data-nonce="82e82078c5" class="buttons button-outlined medium bookmark c27-bookmark-button ">
            <i class="fa fa-heart-o"></i><span class="button-label">Bookmark</span> </a>
        </li>
        <li class="dropdown">
          <a href="#" class="buttons button-outlined medium show-dropdown sn-share" type="button" id="5a4491c30a4b9__cover_button" data-toggle="dropdown">
            <i class="mi redo"></i><span class="button-label"></span> </a>
          <ul class="i-dropdown share-options dropdown-menu" aria-labelledby="5a4491c30a4b9__cover_button">
            <li><a class="c27-open-popup-window" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F&amp;title=Offer+test&amp;picture=http%3A%2F%2Fsloth.com%2Fwp-content%2Fuploads%2F2017%2F10%2Flogo.png">Facebook</a></li>
            <li><a class="c27-open-popup-window" href="http://twitter.com/home?status=Offer+test+http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F">Twitter</a></li>
            <li><a class="c27-open-popup-window" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F&amp;media=http%3A%2F%2Fsloth.com%2Fwp-content%2Fuploads%2F2017%2F10%2Flogo.png&amp;description=Offer+test">Pinterest</a></li>
            <li><a class="c27-open-popup-window" href="https://plus.google.com/share?url=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F">Google Plus</a></li>
            <li><a class="c27-open-popup-window" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F&amp;title=Offer+test">LinkedIn</a></li>
            <li><a class="c27-open-popup-window" href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F&amp;t=Offer+test">Tumblr</a></li>
            <li><a href="mailto:?subject=http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F&amp;body=Offer test - http%3A%2F%2Fsloth.com%2Flisting%2Foffer-test%2F">Mail</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="buttons button-outlined medium show-dropdown c27-listing-actions" type="button" id="more-actions" data-toggle="dropdown">
            <i class="mi more_vert"></i>
          </a>
          <ul class="i-dropdown share-options dropdown-menu" aria-labelledby="more-actions">
            <li><a href="http://sloth.com/my-account/my-listings/?action=edit&#038;job_id=211">Edit Listing</a></li>
            <li><a href="#" data-toggle="modal" data-target="#report-listing-modal">Report this Listing</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

出现问题是因为未针对动画边框指定边框样式和边框宽度。只需将以下属性添加到您的上一个CSS规则中：

border: 4px solid;

您还可以使用边框属性设置动画边框的其他初始宽度，颜色或透明。