圓圈隨機彈出在我的css動畫

有人可以解釋我的小藍圈來自哪裏在白圈的右下邊緣嗎？它是在我的動畫結束時發佈的，我不知道它來自哪裏，我甚至嘗試將動畫重置爲全部0％，但它沒有成功。圓圈隨機彈出在我的css動畫

這是寫在SCSS，我會包括鏈接到這裏codepen：Code Pen

SCSS：

*{box-sizing: border-box;} 

.content-wrapper{ 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.box{ 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    background-color: #fff; 
    position: absolute; 
} 

.ping{ 
    border-radius: 50%; 
    position: absolute; 
    z-index: -1; 
    animation: ping 1.6s ease-out infinite; 
} 

@keyframes ping{ 
    0% { 
     width: 60%; 
     height: 60%; 
     left: 20%; 
     top: 20%; 
     border: 80px solid rgba(102, 217, 255, .5); 
    } 

    80% { 
     width: 160%; 
     height: 160%; 
     left: -30%; 
     top: -30%; 
     border: 4px solid rgba(102, 217, 255, 1); 
    } 

    99% { 
     opacity: 0; 
    } 

    100% { 
     border: 0px solid rgba(102, 217, 255, 1); 
     width: 0%; 
     height: 0%; 
     left: 0%; 
     top: 0%; 
    } 
}

HTML：

<div class="content-wrapper"> 
    <div class="box"> 
     <div class="ping"></div> 
    </div> 
</div>

來源

2017-06-21 LUEH

如果你做動畫的16s代替1.6s並添加輪廓到.ping元素，你會看到這個問題（如何元件使）

您最好使用transform到居中尺寸變更元件代替動畫的lefttop和

*{box-sizing: border-box;} 
 

 
.content-wrapper{ 
 
\t width: 100%; 
 
\t height: 100vh; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.box{ 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t border-radius: 50%; 
 
\t background-color: rgba(255,255,255,1); 
 
\t position: absolute; 
 
} 
 

 
.ping{ 
 
\t border-radius: 50%; 
 
\t position: absolute; 
 
\t z-index: -1; 
 
\t animation: ping 1.6s ease-out infinite; 
 
\t 
 
\t transform:translate(-50%, -50%); 
 
\t left:50%; 
 
\t top:50%; 
 
} 
 

 
@keyframes ping{ 
 
\t 0% { 
 
\t \t width: 60%; 
 
\t \t height: 60%; 
 
\t \t border: 80px solid rgba(102, 217, 255, .5); 
 
\t } 
 
\t 
 
\t 80% { 
 
\t \t width: 160%; 
 
\t \t height: 160%; 
 
\t \t border: 4px solid rgba(102, 217, 255, 1); 
 
\t } 
 
\t 
 
\t 99% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 
 
\t 100% { 
 
\t \t border: 0px solid rgba(102, 217, 255, 1); 
 
\t \t width: 0%; 
 
\t \t height: 0%; 
 
\t } 
 
}

<div class="content-wrapper"> 
 
\t <div class="box"> 
 
\t \t <div class="ping"></div> 
 
\t </div> 
 
</div>

的

來源

2017-06-21 23:00:38

非常感謝你，它清楚地顯示出相當不錯，我現在用你的代碼更新了我的筆。我希望這很好！ – LUEH

@LUEH歡迎您。當然，你可以使用你的筆上的代碼。 –

它來自ping關鍵幀：

@keyframes ping { 
    border: 80px solid rgba(102, 217, 255, .5); 
}

那麼這就是所謂的animation爲.ping：

animation: ping 1.6s ease-out infinite;

藍色的顏色，你看到的是rgba(102, 217, 255, .5)。

要刪除此項，請在@keyframes ping的每個百分比範圍內刪除border的所有實例。

希望這會有所幫助！

來源

2017-06-21 22:46:59

我不是指一般的藍色圓圈，這是故意的，當動畫結束時在底部的右邊緣上看，有一個小圓圈的藍色邊緣，你可以看到。我不知道它來自哪裏！ :( – LUEH

對於我來說，沒有額外的藍色邊緣，這當然不是來自你的代碼顯示，只有主要的圓圈產生了，我試着刷新瀏覽器的緩存CSS，按住SHIFT鍵的同時點擊刷新圖標 –

通常它沒有顯示在您的瀏覽器或其他東西，但它肯定存在，我不知道Gaby正在使用什麼瀏覽器，但他看到了那邊的圓圈邊緣，他解決了問題，所以一切都很好現在:)並感謝您的幫助！ – LUEH

圓圈隨機彈出在我的css動畫

回答

相關問題