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.
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.