使用CSS3进行图像转换

Question

我有一个像这样的CSS3按钮

<button class="button brownb">My Button</button>

CSS

.brownb:active {
    background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent;
    color: #FFFFFF;
}
.button:active {
    position: relative;
    top: 1px;
}
.brownb {
    background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516));
background: -moz-linear-gradient(top, #A55757, #831516);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A55757', endColorstr='#831516');
    border: 1px solid #A55757;
    color: #D7D7D7;
}
.button {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    font: bold 14px/100% Arial,Helvetica,sans-serif;
    margin: 0 2px;
    outline: medium none;
    padding: 0.5em 2em 0.55em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

我希望像光一样抓住锋利闪亮的剑然后走开。 CSS3有可能吗？我已经多次使用Flash看过这个效果，这就是查询的原因 英语不是我的母语，所以这个效果可能有一个名字（显然我不知道，所以我不能谷歌。）有可能吗？我不是特别关于在渐变上有这种效果（普通背景会这样做）

在这里小提琴：http://jsfiddle.net/naveen/V9Rtw/

免责声明：这基本上是给我代码，但我对CSS不好，所以这是怀疑。任何使用正确过渡的指针/推动都会有很大的帮助。

更新

我想要像Google在搜索页面中为印度实施的内容。

此处链接：http://www.google.co.in/search?q=hello+world

Google使用此精灵执行此操作：http://www.google.co.in/images/experiments/p1/p1sprite.png

然后将它放在名为experiments的文件夹中：）

Answer 1

编辑：我认为您在谈论搜索按钮。我的网络不允许我看到你发布的其他链接:(。我发现按钮非常成功的方法是创建一个这样的背景图像。假设你的图像是25像素高，75像素宽。创建一个image 75px x 75 px。将三个按钮放在那里：

 ____________
 | normal   |
 ------------
 ____________
 | over     |
 ------------
 ____________
 |          |
 ------------

然后，使用background-position属性设置图像中所需的位置。还要确保溢出：隐藏。通过这种方式，您可以更好地控制效果，下载时间可以协商（毕竟，对于渐进式下载，make图像首先显示），并且您更向后兼容，并且它被缓存（假设）。我也不知道渐变渲染如何影响浏览器性能，但我认为它可能会产生一些影响。

此外，如果这回答了您的问题，请标记为答案！

JMAX

---

我还没有看到这样做的方法。我假设你希望这个效果在点击按钮时可见，对吗？您可以尝试更改渐变，以便它可以升高或降低，但这会使整个过程产生效果。这是一种可行的方法：

background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.32, #A55757),
    color-stop(0.57, #831517)
);
background-image: -moz-linear-gradient(
    center bottom,
        #A55757 32%,
#831517 57%
);

来自：http://gradients.glrzad.com/

另外，你有没有想过使用图像？我认为这会给你灵活性。我不了解您的目标受众，但它也可能提供更好的向后兼容性。

JMAX

Answer 2

你的问题的答案是：不能用只是 CSS做到这一点。但是，它可以通过JavaScript和CSS的组合来完成。

使用您的Google +1按钮作为示例，他们有一个精灵，并将使用JavaScript在图标悬停的一段时间内切换背景位置。

如何在一段时间内为精灵图像添加动画的示例可以在这里看到：

How to show animated image from PNG image using javascript? [ like gmail ]

Answer 3

http://designlovr.com/beautiful-photoshop-like-buttons-with-css3/

这可能会帮助您获得闪亮效果，必须仍然可以进行过渡