css3 div'pulse'

时间:2010-10-01 01:53:35

标签: animation html5 css3

如何制作div /输入闪光或'脉冲'?比方说,表单字段输入了无效值?

1 个答案:

答案 0 :(得分:2)

使用类似 on this page 的CSS3,您可以将脉冲效果添加到名为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