css 脉冲动画与CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 脉冲动画与CSS相关的知识，希望对你有一定的参考价值。

.pulsator {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border-color: red;
  background: red;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,0,0, 0.4);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 1);
    box-shadow: 0 0 0 0 rgba(255,0,0, 1);
  }
  100% {
      -moz-box-shadow: 0 0 0 12px rgba(255,0,0, 0.1);
      box-shadow: 0 0 0 12px rgba(255,0,0, 0.1);
  }
}

以上是关于css 脉冲动画与CSS的主要内容，如果未能解决你的问题，请参考以下文章

css 脉冲动画css

使用 CSS3 Transform Scale 和 jQuery 动画脉冲效果

css 脉冲动画按钮（悬停和焦点）

如何使用 -webkit-animation - 外环创建脉冲效果

CSS 过渡与 CSS 动画

角度 2 动画与 css 动画 - 何时使用啥？