Динамический CSS: преобразование объектов
Опубликованно 01.04.2018 00:18
Анимация элементов страницы, может работать в независимо от процесса или для выполнения для отображения действий посетителя. В любом случае, в CSS-это превращение одного элемента не влияет на общий поток и выполняется независимо от содержимого страницы в целом.
При использовании правил и развития логики изменения элементов, правильного использования значений свойств и правил очень важно. CSS-трансформации не предоставляет разработчику возможность управления. Все преобразования выполняются с использованием функций и их значений. Общие правила преобразования
Логика реализована на идее функции преобразования, который заключается в искажении элемента. Элементы страницы-это прямоугольная область, в том числе при возникновении мягкой и графики в ней.
Путем изменения размеров сторон области или их перемещение (движение) может быть:сформирована динамическая;сформировала перспективу.вошел том.
В любом случае, все преобразования, которые происходят в плоскости, но результат можно как в 2D так и в 3D отображении.
В следующем примере показаны четыре области, каждая из них будет CSS - трансформации.
Верхний ряд картинки - оригинал, Нижняя строка-это результат выполнения функции. Для демонстрации основных возможностей использовать следующее описание CSS и показана вставка в HTML-код страницы.
В этом примере преобразование возникает при наведении мышки на элемент и присваивается через псевдо-класс hover.
В связи со свойством transform при использовании функции translate следует отметить, что CSS-это преобразование может быть заменен свойств left и top. Что касается искажения, функция skew - результат может быть не предсказуемым.
Считается, что косые и редко используется, но правильное и комплексное применение CSS анимации Rotate позволяет построить динамику в трехмерном пространстве при движении объекта. Например, "корабль на орбите" в контексте веб-страницы может быть движение товара на витрину, в магазин пространства.Перспективы трансформации
Преобразование текста в CSS может дать особый эффект применения перспективы. В следующем примере показано, как нормальный отображения текста можно преобразовать в смог сказать мне.
Возможно, это имеет смысл, в некоторых задачах, но практичность обратная связь идеи очевидна: можно разместить информацию в срок, а при наведении на нее мышки превратить в нормальное отображение. Компактно и эффектно.
Эти примеры преобразования описаны в CSS следующим образом:
Использовать свойство transform-origin позволяет определить точку, относительно которой выполняются преобразования. Перемещая эту точку, он может контролировать центр, на котором выполняется CSS преобразований.
Функция rotate, хотя есть два варианта - rotateX и rotateY - но без "X" и "y" имеет один параметр.
Во всех случаях преобразование элементов следует отлаживать простые примеры, чтобы избежать неожиданных результатов. Лучше сначала грамотно сформировать правила и описывать имущество простого элемента, что включать сразу в спектре желаемых преобразований. Правильное составление правил и свойств CSS-это гарантия успешной и эффективной. Использовать свойство animation
CSS с помощью анимации animation и @кадрами, дополняет возможность трансформации, позволяя конвертировать в реальный образ через управляемое движение элемента или, управляемого преобразования ее формы.
Верхней строке элементов в нормальное состояние. Первый столбец перемещается, второй тур, и третий масштаб. Показано несколько кадров. Для реализации этой функции используется следующий код:
Динамика и длительность процесса, можно установить в animation и @ключевыми кадрами. Возможен плавный и ступенчатый процесс изменений. Можно нанести изменения и движения с ускорением.Характеристики свойство animation
Свойство animation, как правило, записывается в строку. В него включают восемь вариантов:animation-name - имя анимации;animation-duration - продолжительность анимации (в секундах "s" мс "мс");animation-timing-function - тип анимации (ease, linear, ease-out, ease-in, ease-in-out, cubic-bezier);animation-iteration-count - количество повторов анимации или infinite;animation-direction - направление движения (обычный, обратный, alternate, alternate-reverse );animation-play-state - остановка анимации (бег, paused);animation-delay - задержка анимации перед началом воспроизведения (в секундах "s" мс "мс");animation-fill-mode - воспроизведение анимации вне времени воспроизведенияnone, форварды, backwards, both);
При разработке анимации с помощью анимации свойства преобразования указываются в правиле @ключевых кадров, что определяет последовательность преобразования элемента, шаг за шагом.Важные параметры анимации
Любой анимации имеет название, длительность и тип. По имени определяется нужное описание @кадрами, длительность определяет время процесса, а тип параметра движения.
При необходимости равномерного процесса (движения и/или преобразования) используется значение linear. Если вы хотите иметь начальное ускорение - ease-out, если в конце - ease-in. Просто ease-это скольжение, ease-in-out - более мягкий вариант.
Значение cubic-bezier позволяет сформулировать комплекс-это движение и построить более оригинальной версии анимации.
На веб-сайте производителя вы можете выбрать любую версию стандартных движений и разработать свой собственный. При нажатии на кнопку "GO!"), две коробки перемещаются параллельно, и могут сравнить разницу и визуально сформировать нужное поведение элемента.Строительство фреймов анимации
Свойство @кадрами, является "определяющим" для сотрудников (см. пример выше), с помощью которых происходит превращение одного элемента. Идея собственности, очень простая, но возможности колоссальные.
Процесс начинается с 0 % и заканчивается на 100 % от общего времени, посвященный анимации. Можно использовать только концы from и to, или 0% и 100 %. Большего эффекта можно достичь, разделив весь процесс анимации/преобразования в участки. Шаг фаза может быть любой.
Обычно у вас есть несколько вариантов: 0 %, 25 %, 50 %, 75 % и 100 %. Иногда достаточно только три поля: 0 %, 50 % и 100 %. Как действовать в каждом конкретном случае, зависит от задачи и разработчика.
При построении любой вариант трансформации, необходимо соблюдать одно важное правило. Не всегда допустимо использование JavaScript, особенно в том, что касается типа изменение свойств элементов, например, изменение значения свойства background-image.
HTML, CSS и JavaScript в совершенстве, но во всех случаях необходимо учитывать реальные возможности каждого компонента. Идеально подходит при работе в четкую комбинацию, и не мешают друг другу.
Категория: Техника
