Spinning Effect Anchor tag CSS3 - html

Question

Helo Guys!
I was trying to create a spinning hover effect with CSS3.
Just made a circle spinning effect. Check the jsFiddle here: http://jsfiddle.net/63yyeezn/26/
However what I want to do now is to create something tthat spins but this time its box type
just like this image:
So basically I want similar effect just like the jsFiddle I shown above however this time it must be box.
Really having a hard time figuring this out. Here's my CSS:
body {
background: #292929;
padding-left: 30px;
font-size: 12px;
}
.twist {
display: inline-block;
font-size: 45px;
line-height: 90px;
cursor: pointer;
margin: 20px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
text-decoration: none;
z-index: 1;
color: #fff;
}
.twist:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content:'';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.twist:before {
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.twist.demo-4 {
width: 92px;
height: 92px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}
.twist.demo-4:before {
line-height: 92px;
}
.twist.demo-4:after {
top: -4px;
left: -4px;
padding: 0;
z-index: 10;
border: 4px dashed #fff;
}
.twist.demo-4:hover {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
color: #fff;
}
.twist.demo-4:hover i {
color: #fff;
}
.twist.demo-4.spin:hover {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.twist.demo-4.spin:hover:after {
-webkit-animation: spinAround 9s linear infinite;
-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;
}
#-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
Hope you can help me with a jsFiddle file.
Thanks!

Answer 1

My answer won't fit exactly your example, but may interest you as it's a full-CSS3 solution, without HTML markup change. The animation won't be a rotation, but a translation.
Webkit version
.bordered {
overflow: hidden;
}
.bordered:before {
content: '';
position: absolute;
top: 5px; /* 5px: border width */
left: 5px;
right: 5px;
bottom: 5px;
background: white;
z-index: -1;
}
.bordered:after {
content: '';
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background: black;
z-index: -2;
}
.bordered:hover:after {
background: -webkit-linear-gradient(left, white 50%, black 50%); /* black: border color*/
background-size: 20px 100%; /* 20px: dash width */
-webkit-animation: borderAnimated 1s linear infinite;
}
#-webkit-keyframes borderAnimated {
from {
transform: rotate(45deg) translate(0, 0);
}
to {
transform: rotate(45deg) translate(20px, 0);
}
}
/* --- Style only--- */
.bordered {
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="bordered">Lorem ipsum</div>
The trick is to have a stripped background in the :after pseudo-element, and a fake empty background in the :before element, which will work as a mask. When hovering your element, you just have to animate the :after pseudo-element to get something nice.

Answer 2

Credits: #vsynz
I don't think it can be possible only with static borders. Here is an alternative solution:
.rotating-dashed {
position: relative;
margin: 40px auto;
width: 90px;
height: 90px;
overflow: hidden;
color: #268;
}
.rotating-dashed .dashing {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.rotating-dashed .dashing:nth-of-type(2) {
-webkit-transform: rotate(90deg);
}
.rotating-dashed .dashing:nth-of-type(3) {
-webkit-transform: rotate(180deg);
}
.rotating-dashed .dashing:nth-of-type(4) {
-webkit-transform: rotate(270deg);
}
.rotating-dashed .dashing i {
display: block;
position: absolute;
left: 0;
top: 0;
width: 200%;
border-bottom: 5px solid
}
.rotating-dashed strong {
display: block;
width: 105%;
line-height: 90px;
text-align: center;
position: absolute;
}
.rotating-dashed:hover {
cursor: pointer;
}
.rotating-dashed:hover .dashing i {
-webkit-animation: slideDash 2.5s infinite linear;
border-bottom: 5px dashed
}
#-webkit-keyframes slideDash {
from {
-webkit-transform: translateX(-50%);
}
to {
-webkit-transform: translateX(0%);
}
}
<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>Demo</strong>
</div>