css3 div '脉冲'答案

【问题标题】：css3 div 'pulse'css3 div '脉冲'
【发布时间】：2013-09-10 00:04:28
【问题描述】：

如何制作 div/input flash 或“pulse”？例如，表单字段输入了无效值？

【问题讨论】：

【解决方案1】：

使用 CSS3 类似 on this page，您可以将脉冲效果添加到名为 error 的类中：

@-webkit-keyframes error {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

.error { 
  opacity: 0.75; 
  -webkit-animation-name: error; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 10; 
}

YouTube demo 如果您不在 Safari、Chrome 或其他浏览器上，则上述适用。该演示使用:hover 来启动动画。

您可以将上述类添加到无效条目中。

例如，使用 jQuery validation plugin 非常简单：

$(function() {
    $("form").validate();
});

jsFiddle example

【讨论】：

嗯很好。我找不到一个让元素闪烁的东西——你知道这样的例子吗？
@hvgotcodes - jQuery 有一些 [简单的表单验证选项](docs.jquery.com/Plugins/validation)。将其与上述技术相结合。我在一个简化的示例中进行了编辑。
不使用 jquery -- 令人惊叹的谷歌不会向我展示 webkit 启用的一些“flash”...