Spinning Effect Anchor tag CSS3

Question

Helo Guys!

Я пытался создать эффект зависания с CSS3.

Только что сделал круговой эффект кругового движения. Проверьте jsFiddle здесь: http://jsfiddle.net/63yyeezn/26/

Однако то, что я хочу сделать сейчас, чтобы создать что-то tthat вращается, но на этот раз его тип коробки

так же, как это изображение:

Поэтому в основном я хотите аналогичный эффект, как и jsFiddle, показанный выше, но на этот раз он должен быть в коробке.

Действительно трудно понять это. Вот мой 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); 
    } 
} 

Надеюсь, вы сможете помочь мне с файлом jsFiddle.

Спасибо!

Answer 1

Мой ответ не будет соответствовать именно вашему примеру, но может заинтересовать вас, как это полный CSS3 решение без изменения разметки HTML. Анимация не будет вращением, а переводом.

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>

Хитрость заключается в том, чтобы иметь раздели фон в :after псевдо-элемента, а также поддельные пустой фон в :before элемент, который будет работать как маска. При падении вашего элемента вам просто нужно оживить псевдоэлемент :after, чтобы получить что-то хорошее.

Answer 2

Кредиты: @vsynz

Я не думаю, что это может быть возможно только со статическими границами. Вот альтернативное решение:

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