Переход изображения с помощью 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, и поэтому запрос.
Английский не является моим родным языком, и поэтому у этого эффекта могло быть имя (которого, очевидно, я не знаю, и поэтому я не мог его погуглить).Является ли это возможным?Я не особенно о том, чтобы иметь этот эффект на градиент (подойдет простой фон)

Fiddle здесь: 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

И они помещают его в папку с именем экспериментов:)

Answer 1

Редактировать: Я предполагаю, что вы говорите о кнопке поиска.Моя сеть не позволяла мне видеть другие ссылки, которые вы опубликовали :(. Способ, который я нашел весьма успешным с помощью кнопки, состоит в том, чтобы создать фоновое изображение, подобное этому. Скажем, ваше изображение имеет 25 пикселей в высоту и 75 пикселей в ширину.image 75px x 75 px. Поместите туда три кнопки, например, так:

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

Затем используйте свойство background-position, чтобы установить, какую позицию вы хотите иметь на изображении. Также убедитесь, что переполнение: скрыто.Таким образом, вы получаете больший контроль над эффектом, время загрузки является предметом переговоров (в конце концов, для прогрессивной загрузки сначала появляется образ make), и вы более обратно совместимы, и он кэшируется (предположительно).Я знаю, как градиентный рендеринг влияет на производительность браузера, но я мог бы предположить, что он может оказать какое-то влияние.

Кроме того, пометьте как ответ, если это отвечает на ваш вопрос!

---

Я не видел способа сделать это. Я предполагаю, что вы хотите, чтобы этот эффект был виден, когда они нажимают кнопку, правильный?Вы можете попробовать изменить градиент так, чтобы он поднимался или опускался, но это повлияло бы на весь путь.Вот возможный способ для этого:

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, чтобы переключать фоновое положение в течение заданного периода времени, когда значок находится над ним.

Пример того, как анимировать изображения спрайтов с течением времени, можно увидеть здесь:

Как показать анимированное изображение из PNG-изображения с помощью JavaScript? [как gmail]

Answer 3

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

Это может помочь вам для блестящего эффекта, переходы должны быть сделаны до сих пор