点滅要素の境界線CSSの方法

Question

私は、このリンクで実証されたように私のCSS境界を点滅させようとしています：（http://www.multipetros.gr/posts/728-blink-elements-border-the-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; 

またborder propertiesを使用して他の初期の幅、色やアニメーションの境界線の透明を設定することができます。