需要在标签上显示脉冲动画以突出显示未完成的通知。 我遇到了this在网上研究并实现了相同的方法。它运行良好,但是,当标签闪烁时,CPU 使用率恒定在 50%,而通常几乎没有任何东西。 我想了解发生这种情况的原因或原因,如果可能的话,我想进行修复。
CSS:
.pulse {
/*margin:100px;*/
display: block;
/*width: 22px;*/
/*height: 22px;*/
/*border-radius: 100%;*/
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(196,33,61, 0.85);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
html:
<a class="dropdown-toggle" data-toggle="dropdown" id="alertingDashboardDropdown" href="#">Alerts Dashboard
<span class="label {{alertCount.totalOpenAlertsLabelClass}} dropdown-subscript-white pull-right">{{alertCount.totalOpenAlerts}}</span>
</a>
.
.
{{alertCount.totalOpenAlertsLabelClass}}
基本上返回“label-primary pulse”
最佳答案
发生这种情况是因为您正在使用 box-shadow
,这对动画不是很好,因为它会触发重绘。
您可以 check here哪些属性会触发布局、绘制和合成更改。
最好的是 opacity
和 transform
,也许您可以更改动画以使用它们。
编辑: 创建了 2 个 jsfiddle,其中一个带有 box-shadow另一个是 transform .我已经编辑了您的代码,但您可以检查性能、研究它、了解更改并根据您的需要进行调整。
我是怎么做到的:
添加了一个 :before
伪元素,让动画在数字下运行。 will-change: transform;
告诉浏览器元素的变换将发生变化,浏览器会对其进行优化。
.pulse {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 100%;
background-color: #cca92c;
text-align: center;
cursor: pointer;
}
.pulse:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #cca92c;
border-radius: 100%;
z-index: -1;
animation: pulse 2s infinite;
will-change: transform;
}
.pulse:hover:before {
animation: none;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
<a class="dropdown-toggle" data-toggle="dropdown" id="alertingDashboardDropdown" href="#">
<span>Alerts Dashboard</span>
<span class="pulse">5</span>
</a>
关于html - 使用 CSS box-shadow 制作脉冲动画会占用大量 CPU,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47437562/