Question

我会创建一个脉冲颜色效果，最长持续时间为一分钟。要用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吗？

Answer 1

但是在这个我无法控制时间

您可以使用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 / angularjs一分钟的脉冲图标或元素颜色

1 个答案: