Question

有人可以解释一下这个小蓝圈来自哪个位于白色圆圈的右下边缘？它在我的动画结束时出现，我不知道它来自哪里，我甚至试图将动画重置为100％全部为0％，但它不起作用进行。

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

Answer 1

它来自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)。

要删除此内容，请删除每个border百分比内的@keyframes ping个实例。

希望这有帮助！

Answer 2

如果您制作动画16s而不是1.6s并向.ping元素添加大纲，您将看到问题（元素如何移动）

最好使用transform将尺寸更改元素居中，而不是动画left和top

*{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: rgba(255,255,255,1);
	position: absolute;
}

.ping{
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	animation: ping 1.6s ease-out infinite;
	
	transform:translate(-50%, -50%);
	left:50%;
	top:50%;
}

@keyframes ping{
	0% {
		width: 60%;
		height: 60%;
		border: 80px solid rgba(102, 217, 255, .5);
	}
	
	80% {
		width: 160%;
		height: 160%;
		border: 4px solid rgba(102, 217, 255, 1);
	}
	
	99% {
		opacity: 0;
	}
	
	100% {
		border: 0px solid rgba(102, 217, 255, 1);
		width: 0%;
		height: 0%;
	}
}

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

在我的css动画中随机弹出一个圆圈

2 个答案: