Create Awesome CSS Border Rotation Animation

In this tutorial I am going to share awesome pure CSS script to create a moving border around image which looks really cool. In this example a continues rotating border will be visible. and whenever you’ll hove mouse pointer on surrounded blurred image, image will be visible in clear shape.
CSS Border Rotation Animation

HTML

Create simple HTML div container which will display blurred image with rotation border animation.

<div id="container">
  <div></div>
  </div>
      <div class="test"><img src="http://www.foxglovesflowers.com/_images/welcome-placeholder.jpg"></div>

CSS

Add Css on page to make border rotation dynamic and visible image on mouse over.

body
{
    background-color: #333;
}
a{ color:#fff; }
#container {
 
width: 250px;
height: 250px;
padding:5px;
position: relative;
    background-image: linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -o-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -moz-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -ms-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
-webkit-animation-name: rotate; 
    -webkit-animation-duration: .5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: .5s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.56, #F24D55),
    color-stop(0.57, #FF924F),
    color-stop(0.74, #FFC164),
    color-stop(0.74, #62C374),
    color-stop(0.34, #F24D55),
    color-stop(0.33, #00AEDA)
);
    border-radius:50%;
}
 
#container div {
background-color: #333;
    color:#fff;
font-size: 20px;
text-align: center;
 
min-height: 100%;
    border-radius:50%;
}
 
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
 
@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
 
.test{
  width:250px;
  height:250px;
  border-radius:50%;  
  position:absolute; 
  margin-top:-255px;
  margin-left:5px;
}
.test img {
  width:250px;
  height:250px;
  border-radius:50%; 
  position:absolute;
  filter: blur(30px);
  -webkit-filter: blur(30px);
transition: .5s ease-out;
   -moz-transition: .5s ease-out;
   -webkit-transition: .5s ease-out;
}
.test img:hover {
   filter: blur(0.6px);
  -webkit-filter: blur(0.6px);
  width:250px;
  height:250px;
  border-radius:50%; 
}

See live demo and download source code.

DEMO

This awesome script developed by shadowman86, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.