Spinning Effect Anchor tag CSS3

Question

Helo Guys!

Stavo cercando di creare un effetto hover di rotazione con CSS3.

Ho appena creato un effetto di rotazione del cerchio. Controllare il jsFiddle qui: http://jsfiddle.net/63yyeezn/26/

Tuttavia quello che voglio fare ora è quello di creare qualcosa di tthat gira, ma questa volta la sua forma di scatola

proprio come questa immagine:

Quindi, in pratica ho voglio un effetto simile proprio come il jsFiddle che ho mostrato sopra, ma questa volta deve essere una scatola.

Davvero avendo difficoltà a capirlo. Ecco il mio 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); 
    } 
} 

Spero che tu possa aiutarmi con un file jsFiddle.

Grazie!

Answer 1

La mia risposta non si adatta esattamente il vostro esempio, ma può interessare in quanto è una soluzione completa CSS3, senza modifiche markup HTML. L'animazione non sarà una rotazione, ma una traduzione.

versione Webkit

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

Il trucco è quello di avere uno sfondo spogliato nella pseudo-elemento :after, e uno sfondo vuoto falso nell'elemento :before, che funzionerà come una maschera. Al passaggio del mouse sul tuo elemento, devi solo animare lo pseudoelemento :after per ottenere qualcosa di carino.

Answer 2

Crediti: @vsynz

non credo che possa essere possibile solo con i bordi statici. Ecco una soluzione alternativa:

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