【问题标题】:CSS3 Transitions - making a box pulsate with different box-shadowsCSS3 过渡 - 用不同的盒子阴影使盒子跳动
【发布时间】:2014-03-03 14:51:12
【问题描述】:

我已经阅读了很多关于此的内容,但一直在努力理解它。我可以在:hover 上找到很多方法来为 div 的属性设置动画,但无论如何我都找不到在没有任何用户交互的情况下让属性动画。

谁能告诉我如何让一个 div 跳动,即为 box-shadow 属性设置动画。

类似

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

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

非常感谢。

【问题讨论】:

标签: css css-transitions


【解决方案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/

【讨论】:

    猜你喜欢
    • 2013-05-19
    • 1970-01-01
    • 2014-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多