Question

我已经阅读了相当多的内容，但一直在努力让我头脑发热。我可以找到很多方法来动画:hover上div的属性，但我无法找到只是在没有任何用户交互的情况下进行属性动画。

有人可以告诉我如何让div成为脉动，即为box-shadow属性设置动画。

像

这样的东西

box-shadow: 0px 0px 10px #F00;

到

box-shadow: 0px 0px 20px #00F;

非常感谢。

Answer 1

您可以通过关键帧执行此操作：

div{
    height: 100px;
    -moz-animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-name: changeShadow;
      -webkit-animation-name: changeShadow;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    border: 1px solid black;
}
@-webkit-keyframes changeShadow{
  from {
    box-shadow: 0px 0px 10px #F00;
  }

  to {
    box-shadow: 0px 0px 20px #00F;
  }
}
@-moz-keyframes changeShadow{
  from {
    box-shadow: 0px 0px 10px #F00;
  }

  to {
    box-shadow: 0px 0px 20px #00F;
  }
}

这是一个小提琴：http://jsfiddle.net/dc4f2/

CSS3过渡 - 使用不同的盒子阴影制作盒子脉动

1 个答案: