03:33 Анимируем CSS3-градации | |
| Спецификация CSS Transitions вобрала в себя перечень параметров, которые можно «оживить». Данный список, насколько нам известно, охватывает анимационные параметры как для переходов, так и для покадровой анимации. Но это всего лишь список параметров, не больше. И так как CSS3-градации – это не совсем параметры, а изображения, создаваемые браузером, они, очевидно, не входят в этот перечень параметров с возможностью анимации. Но это не значит, что вы не можете «оживить» градации. Градации, как и стандартные изображения, представляют собой субъект конкретного параметра, связанного с фоном, и который можно анимировать. Например, background-size и background-position.  Для того чтобы наглядно продемонстрировать это, мы создали CSS3-кнопки, градации которых перемещаются, как только вы наводите на них курсор мыши: * Посмотреть демо В коде данного примера нет ничего сложного, и мы вряд ли первые, кто написал об этой технике. Но давайте рассмотрим код второй кнопки на этой же демо-странице, чтобы вы смогли увидеть, как она была реализована: .two:link, .two:visited {background: #2876b2;background: -webkit-linear-gradient(#2876b2, #549ad0);background: -moz-linear-gradient(#2876b2, #549ad0);background: -o-linear-gradient(#2876b2, #549ad0);background: -ms-linear-gradient(#2876b2, #549ad0);background: linear-gradient(#2876b2, #549ad0);background-repeat: repeat;-webkit-background-size: 100% 200%;-moz-background-size: 100% 200%;background-size: 100% 200%;-webkit-transition: all .5s linear;-moz-transition: all .5s linear;-o-transition: all .5s linear;-ms-transition: all .5s linear;transition: all .5s linear;}.two:hover, .two:focus, .two:active {background-position: 0 -102%;} Мы задали значение repeat для фона этой кнопки, но нам не нужно делать этого, так как он будет повторяться по умолчанию. Это только лишь для того, чтобы продемонстрировать вам, что здесь происходит. При наведении меняется позиция фона, и когда вы комбинируете это со значением background-size, получается эффект скольжения вниз. Таким образом, градация, которая повторяется, просто смещается на другую позицию. К тому же, мы сделали одинаковый эффект для кнопки в положениях hover, focus и active, но вы можете задавать разную анимацию на различных положениях для всех этих псевдо-классов. Другие кнопки с градацией на демо-странице выглядят немного абстрактно с точки зрения поведения анимации, но принцип реализации примерно тот же: мы выставляем повторяющуюся градацию с уникальными значениями background-size, и анимируем фон за счет изменения значений background-position и/или background-size. Данный метод был применен при разработке кнопок для сайта HTML9 Boilerstrap. В принципе, возможности здесь почти безграничны, но эти небольшие примеры должны наглядно вам все продемонстрировать. Мы уверены, что вы сможете самостоятельно добиться очень впечатляющих эффектов, так что не забудьте потом в комментариях поделиться результатами ваших экспериментов! Если вам необходим источник вдохновения для создания градаций, вы можете обратиться к галерее градационных текстур от Леа Вероу (Lea Verou). | |
|
| |
| Всего комментариев: 0 | |
