圆圈随机弹出在我的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动画

回答

相关问题