CSS animation block border radiuss

當動畫進行時，border-radius不起作用，動畫完成後，border-radius開始工作，任何解決方案？CSS animation block border radiuss

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

可能重複這個簡短的文章將是解答更有用的順序問題/ 34507083/border-radius-and-overflow-arent-respected-when-animation-is-added-on-a-differe/34508062＃34508062（無法確認，因爲我在移動設備上訪問但添加了z-index ：1'到'.up'應該可以解決問題，就像在那個答案中提到的那樣。原因也在那裏提供。） – Harry

謝謝，作品:) –

如果您的問題與特定的瀏覽器或設備有關，最好提一下。我在firefox中測試了你的代碼，沒有任何問題。 –

您應該設置一個位置到相對或絕對，並添加的z-index到你的spin360 alement。但真的......不要問我爲什麼，因爲你的代碼在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>

在從文檔頂部HTML流至底部

來源

2017-02-08 12:46:03 Vixed

元素。即層放置在代碼的頂部，它將顯示在標記底部的圖層之前。你可以採取一些圖層並改變它的行爲。例如，您可以使用定位來更改元素的流向。在你的情況下，你應該添加z-index屬性來顯示圖像上的跨度。您的代碼圖像中的原因低於流程中的原因。通過寫Z-索引您可以指定元素的

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

我也想流http://stackoverflow.com/的http://marksheet.io/css-the-flow.html

來源

2017-02-08 12:55:23

CSS animation block border radiuss

回答

相關問題