Spinning Effect CSS3 Anchor Tag

Question

Helo Guys!

I tried to create a hover effect with CSS3.

Just made a circular effect. Check out jsFiddle here: http://jsfiddle.net/63yyeezn/26/

However, what I want to do now is to create something that rotates, but this time its window type

just like this image:

So basically I want a similar effect like jsFiddle shown above, but this time it should be in the box.

It is actually hard to understand. Here is 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 the jsFiddle file.

Thanks!

Answer 1

My answer is not suitable for your particular example, but it may interest you, since this is a complete CSS3 solution without changing the HTML markup. Animation will not be rotation, but 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 divided background in the :after pseudo-element and a fake empty background in the :before element, which will work like a mask. When an element hangs, you just need to animate the :after pseudo-element to get something nice.

Answer 2

Credits: @vsynz

I do not think that this is 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>