我将创建最长持续时间为一分钟的脉冲颜色效果。为了用 css 达到这种效果,我可以这样做:
@-webkit-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
@-moz-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
@-o-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
@keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
<div class="element"></div>
但是在这个我无法控制时间。特别是,我会在按钮内的图标中实现这种效果
<md-button aria-label="Info" id="info" title="info" ng-click="openInfo()" class="md-icon-button">
<i class="zmdi zmdi-help red-color"></i>
</md-button>
那个<i />
元件应以红色脉冲最多一分钟。这可以用 angularjs 或简单的 javascript 来实现吗?
最佳答案
But in this one I can't control the time
您可以使用 animation-iteration-count
。由于您的动画需要 3 秒,因此您可以将其值设置为 20
:
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s 20; /* Safari 4+ */
-moz-animation: pulse 3s 20; /* Fx 5+ */
-o-animation: pulse 3s 20; /* Opera 12+ */
animation: pulse 3s 20; /* IE 10+, Fx 29+ */
}
关于javascript - 使用 javascript/angularjs 将图标或元素颜色脉冲一分钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47672822/