CSS анимация блок граница радиоизлучение

Когда анимация идет, радиус границы не работает, после того, как анимация завершена, граничный радиус начинает работать, любое решение?CSS анимация блок граница радиоизлучение

http://codepen.io/anon/pen/jyvKpq

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"> 

<div><i class='fa fa-spinner spin360'></i> Text...</div> 

<span class="u-p"> 
    <img src="https://68.media.tumblr.com/30ecad5922df68e02bec6e9dc88f95da/tumblr_oe204wOZrX1votm1fo1_500.jpg"> 
</span>

CSS:

.u-p { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    border-radius: 100%; 
    width:65px; 
    height:65px; 

} 
.u-p img { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left:0; 
    margin: auto; 
    width: 65px; 
    height: auto; 
    min-height: 100%; 
    min-width: 65px; 
} 
.spin360 { 
    animation-name: spin360; 
    animation-duration: 1.5s; 
} 
@keyframes spin360 { 
    from {transform: rotate(0deg);} 
    to {transform: rotate(360deg);} 
}

источник

2017-02-08 Arthur Mayer

Возможный дубликат http://stackoverflow.com/ Вопросы/34507083/border-radius-and-overflow-arent-respected-when-animation-is-added-on-a-differe/34508062 # 34508062 (Не удается подтвердить, поскольку я обращаюсь к мобильному телефону, но добавив 'z-index : 1' to '.up' должен решить проблему, как упоминалось в этом ответе. Причина также указана там.) – Harry

Спасибо, работает :) –

Если ваша проблема связана со специальным браузером или устройством, лучше сказать об этом. Я протестировал ваш код в firefox без проблем. –

Вы должны установить позицию в относительной или абсолютной и добавить Z-индекс на ваш spin360 элемент. Но на самом деле ... не спрашивайте меня, почему, потому что ваш код хорошо работает в Firefox.

.u-p { 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    width:65px; 
 
    height:65px; 
 
    border-radius: 100%; 
 
} 
 
.u-p img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left:0; 
 
    margin: auto; 
 
    width: 65px; 
 
    height: auto; 
 
    min-height: 100%; 
 
    min-width: 65px; 
 
} 
 
.spin360 { 
 
    position:relative; 
 
    z-index:1; 
 
    animation-name: spin360; 
 
    animation-duration: 1.5s; 
 
} 
 
@keyframes spin360 { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"> 
 

 
<div> 
 
    <i class='fa fa-spinner spin360'></i> 
 
    Text... 
 
</div> 
 
<span class="u-p"> 
 
    <img src="https://68.media.tumblr.com/30ecad5922df68e02bec6e9dc88f95da/tumblr_oe204wOZrX1votm1fo1_500.jpg" /> 
 
</span>

источник

2017-02-08 12:46:03 Vixed

элементы в HTML-поток из верхней части документа в нижней части. То есть слой, который лежит в верхней части кода, будет показан перед слоем снизу разметки. Вы можете взять некоторый слой и изменить его поведение. Например, вы можете использовать позиционирование для изменения потока элемента. В вашем случае вы должны добавить свойство z-index, чтобы показать пробел по изображению. Причина в вашем изображении кода ниже в потоке. И писать Z-индексов можно задать порядок элементов

.u-p { 
    display: block; 
    z-index:1; 
    position: relative; 
    overflow: hidden; 
    width:65px; 
    height:65px; 
    border-radius: 100%; 
}

Также я думаю, что эта статья будет более полезным для ответа о потоках http://marksheet.io/css-the-flow.html

источник

2017-02-08 12:55:23

CSS анимация блок граница радиоизлучение

ответ

Смежные вопросы