Element border rotation with animation - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:border

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. border

Description

Element border rotation with animation

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Rotating dashed border</title> 
  <style>

.rotating-dashed {<!--from ww w.  j a va 2 s .com-->
   position: relative;
   margin: 40px auto;
   width: 90px;
   height: 90px;
   overflow: hidden;
   color: black;
}
.rotating-dashed:hover {
   color: white;
   cursor: pointer;
   transition: all 0.5s;
}
.rotating-dashed .dashing {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
}
.rotating-dashed .dashing:nth-of-type(1) {
   transform: rotate(0deg);
}
.rotating-dashed .dashing:nth-of-type(2) {
   transform: rotate(90deg);
}
.rotating-dashed .dashing:nth-of-type(3) {
   transform: rotate(180deg);
}
.rotating-dashed .dashing:nth-of-type(4) {
   transform: rotate(270deg);
}
.rotating-dashed .dashing i {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   width: 200%;
   border-bottom: 5px dashed;
   animation: slideDash 2.5s infinite linear;
}
.rotating-dashed strong {
   display: block;
   width: 95px;
   line-height: 90px;
   text-align: center;
   position: absolute;
   font-size: 50px;
   transform: rotate(90deg);
}
@keyframes slideDash {
   from {
      transform: translateX(-50%);
   }
   to {
      transform: translateX(0%);
   }
}
body {
   background: #333;
   color: #fff;
}


      </style> 
 </head> 
 <body translate="no"> 
  <h1>Rotating dashed border</h1> 
  <div class="rotating-dashed"> 
   <span class="dashing"> <i></i> </span> 
   <span class="dashing"> <i></i> </span> 
   <span class="dashing"> <i></i> </span> 
   <span class="dashing"> <i></i> </span> 
   <strong>test</strong> 
  </div>  
 </body>
</html>

Related Tutorials