Анимация и трансформация - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Анимация и трансформация. Доклад-сообщение содержит 55 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Анимация и трансформация Данильченко Анна Александровна Преподаватель кафедры программного обеспечения систем ЖГТУ

Слайд 2

Описание слайда:

Трансформация Трансформации позволяют преобразовывать элементы в двухмерном и трехмерном пространствах.

Слайд 3

Описание слайда:

Поворот Transform: rotate(45deg);

Слайд 4

Описание слайда:

Единицы измерения угла поворота CSS3-трансформации

Слайд 5

Описание слайда:

Масштабирование scale() Значение масштаба задается относительно единицы: scale(2) - исходный элемент будет увеличен в два раза, scale(0.5) - элемент уменьшается в два раза

Слайд 6

Описание слайда:

Можно задать направление: X - по горизонтали, Y - по вертикали, Z - глубина масштабирования.

Слайд 7

Описание слайда:

scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale().

Слайд 8

Описание слайда:

Перемещение translate(x,y), translateX(x),translateY(y)

Слайд 9

Описание слайда:

Искажение skew() искажает форму элемента

Слайд 10

Описание слайда:

Использование нескольких трансформаций

Слайд 11

Описание слайда:

Слайд 12

Описание слайда:

кроссбраузерный CSS -moz-transform - Firefox -o-transform - Opera -webkit-transform - Safari Transform

Слайд 13

Описание слайда:

Слайд 14

Описание слайда:

Слайд 15

Описание слайда:

Перспектива применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них. perspective: 1000; perspective: 125px;

Слайд 16

Описание слайда:

opacity Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. .semi { opacity: 0.5; /* Полупрозрачность элемента */ }

Слайд 17

Описание слайда:

Слайд 18

Описание слайда:

Слайд 19

Описание слайда:

3D-контекст Определяет, как дочерние элементы должны отображаться в 3D-пространстве

Слайд 20

Описание слайда:

Слайд 21

Описание слайда:

Слайд 22

Описание слайда:

Анимация

Слайд 23

Описание слайда:

Анимация

Слайд 24

Описание слайда:

Transition Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function иtransition-delay. Устанавливает эффект перехода между двумя состояниями элемента.

Слайд 25

Описание слайда:

Свойства должны указываться в следующем порядке: transition-property указывает CSS свойства, которые будут задействованы для создания перехода. transition-duration указывает время, в течении которого будет совершен переход. transition-timing-function указывает функцию смягчения отвечающую за плавность выполнения перехода. transition-delay устанавливает величину задержки перед началом выполнения перехода.

Слайд 26

Описание слайда:

Слайд 27

Описание слайда:

transition-timing-function

Слайд 28

Описание слайда:

Слайд 29

Описание слайда:

Шаги - steps()

Слайд 30

Описание слайда:

Пример

Слайд 31

Описание слайда:

Слайд 32

Описание слайда:

Слайд 33

Описание слайда:

Слайд 34

Описание слайда:

С помощью свойства @keyframes Вы можете создать анимацию. from (оформление элемента в начале анимации) to (оформление элемента в конце анимации) 0% - оформление элемента в начале анимации, 100% - оформление в конце анимации

Слайд 35

Описание слайда:

Слайд 36

Описание слайда:

Свойство animation animation-name: boo; - имя animation-duration: 0.5s; - длительность animation-delay: 0.3s; - задержка animation-timing-function: linear; - плавность изменения - описывает метод расчета промежуточных значений свойств для анимации

Слайд 37

Описание слайда:

Свойство animation animation-iteration-count: 5; - установить количество повторов анимации infinite — анимация проигрывается бесконечное число раз animation-direction: normal | reverse | alternate; - порядок выполнения анимации (анимация должна выполняться в обратном порядке в четные разы и в нормальном в нечетные)

Слайд 38

Описание слайда:

Свойство animation animation-play-state: running | paused; - запустить или приостановить анимацию #spinner:hover { -webkit-animation-play-state: paused; } animation-fill-mode: forwards | backwards | both; - определяет, будет ли видимым эффект от анимации, когда сама анимация уже закончилась (можно указать несколько через запятую).

Слайд 39

Описание слайда:

Допустимые значения none — эффект от анимации будет наблюдаться лишь в течение времени анимации forwards — эффект от анимации будет виден даже тогда, когда анимация закончилась (после завершения анимации элемент получает не начальные значения, а какие-то промежуточные из анимации) backwards — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации (имеет смысл применять только к анимациям с ненулевой задержкой) both — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации, а последний будет отображаться даже тогда, когда анимация закончилась (имеет смысл применять только к анимациям с ненулевой задержкой

Слайд 40

Описание слайда:

Доп. Свойства css3 Градиент -webkit-linear-gradient -Создаёт линейный градиент в браузерах Safari и Chrome. background-image: -webkit-linear-gradient([ | ,] [, ]*);

Слайд 41

Описание слайда:

Пример .grad{ background-image: -webkit-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red); background-image: -moz-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red);}

Слайд 42

Описание слайда:

CSS фильтры Filter - Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.