javascript - 需要关于 jquery 图片标题的建议

Question

http://www.zurb.com/expo

多年来，我一直在寻找这样的标题。但我希望该标题的背景不透明。50% 然后悬停 90% 和半脉动文本效果。你能帮我解决这个问题吗？

Answer 1

根据您的浏览器支持，这可以使用 CSS 动画（示例）来完成。

h2 {
    background: rgba(0, 0, 0, 0.5);
}

.image:hover h2 {
    background: rgba(0, 0, 0, 0.8);
    -moz-animation: 2s ease 0s normal none infinite pulse;
    -webkit-animation: 2s ease 0s normal none infinite pulse;
}

@-moz-keyframes pulse {
  0% { color: #000 }
  50% { color: #FFF }
  100% { color: #000; }
}

@-webkit-keyframes pulse {
  0% { color: #000 }
  50% { color: #FFF }
  100% { color: #000; }
}

如果您需要旧版浏览器支持，而不是 RGBA，请使用具有 alpha 透明度的 PNG 背景图像和jQuery animate()而不是 CSS 动画。