CSS和Javascript-边框动画

Question

I would like to have the border animation on the profile photo on this link: https://demo.templateflip.com/creative-cv/

Here's the link to fiddle: https://jsfiddle.net/he1w7z2s/

My fiddle link looks a little different, but what I want is the wave-like animation on the border of the photo id=about-profile-image . How can I achieve this using jQuery and CSS?

 .about-content-center { width: 100%; max-width: 880px; height: 100%; padding: 2rem; padding-top: 0; } #about-profile-image { height: 200px; width: 200px; border-radius: 50%; border: 15px solid transparent; } .about-profile-banner { background: url('https://s3-eu-west-1.amazonaws.com/img3.n-ix.com/wp-content/uploads/2016/12/16152229/Data-Science-Outsourcing-BLOG-banner-1920-Copy-1.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 550px; position: relative; } .about-content-center { } .about-h2 { font-size: 2.5em; font-weight: 700; color: white; } 

  <!-- CoreUI CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <!-- jQuery 3.3.1 --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <div class="about-profile-banner row align-items-center justify-content-center" align="center"> <div class="about-content-center"> <div class="cc-profile-image"> <a href="#"><img id="about-profile-image" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Image"></a> </div> <div class="about-author">Eric Kim</div> <p class="about-author-subtitle text-white">something</p> <a class="btn btn-primary aos-init aos-animate" href="#" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a> </div> </div> 

Answer 1

Add this css animation using z-index:-1 and z-index:0

 .about-content-center { width: 100%; max-width: 880px; height: 100%; padding: 2rem; padding-top: 0; } #about-profile-image { height: 200px; width: 200px; border-radius: 50%; border: 15px solid transparent; } .about-profile-banner { background: url('https://s3-eu-west-1.amazonaws.com/img3.n-ix.com/wp-content/uploads/2016/12/16152229/Data-Science-Outsourcing-BLOG-banner-1920-Copy-1.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 550px; position: relative; } .about-content-center { } .about-h2 { font-size: 2.5em; font-weight: 700; color: white; } @-webkit-keyframes rounded{ 0%{-webkit-transform:scale(0.6, 0.6);transform:scale(0.6, 0.6);opacity:0.0} 50%{opacity:1.0} 100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.0} } @keyframes rounded{ 0%{-webkit-transform:scale(0.6, 0.6);transform:scale(0.6, 0.6);opacity:0.0} 50%{opacity:1.0} 100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.0} } .cc-profile-image a { position: relative; z-index: 0; } .cc-profile-image a:before { content: ""; border: 15px solid rgba(55,140,63,0.6); border-radius: 50%; height: 200px; width: 200px; position: absolute; left: 0; -webkit-animation: rounded 1.6s ease-out; animation: rounded 1.6s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0.0; z-index: -1; } 

 <!-- CoreUI CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <!-- jQuery 3.3.1 --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <div class="about-profile-banner row align-items-center justify-content-center" align="center"> <div class="about-content-center"> <div class="cc-profile-image"> <a href="#"><img id="about-profile-image" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Image"></a> </div> <div class="about-author">Eric Kim</div> <p class="about-author-subtitle text-white">something</p> <a class="btn btn-primary aos-init aos-animate" href="#" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a> </div> </div> 

Answer 2

please try add more this css

 .cc-profile-image > a { position: relative; } .cc-profile-image > a:before { content: ""; border: 15px solid rgba(0,0,0,0.6); border-radius: 50%; height: 200px; width: 200px; position: absolute; left: 0; -webkit-animation: pulsate 1.6s ease-out; animation: pulsate 1.6s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0.0; z-index: 99; } .cc-profile-image img { position: relative; border-radius: 50%; height: 200px; width: 200px; padding: 0; margin: 0; border: 15px solid transparent; z-index: 9999; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); opacity: 0.0 } 50% { opacity: 1.0 } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.0 } } @keyframes pulsate { 0% { -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); opacity: 0.0 } 50% { opacity: 1.0 } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.0 } }