Презентация на тему Анимация средствами CSS. (Часть 5)

Содержание

CSS, часть 5sp.courses.dp.ua По домашнему заданию Сверстать страницу, которая при ширине экрана больше 1000 пикселей выводит 5 столбцов со статьями, от Вариант решенияhttp://files.courses.dp.ua/web/css/ex01.htmlСкопируйте заготовку по адресу: Анимация  средствами CSS Анимация на веб-странице это, как правило, изменение во времени того или иного стилевого (css) свойства На самом деле CSS не позволяет сделать полноценную интерактивную анимацию, но CSS позволяет сделать анимированный Два подхода к анимации в CSS2. Заранее определенный сценарий, который просто проигрывается и базируется на Анимация переходов Transition – переходы между состояниями Transition – переходы между состояниямиАнимировать можно только те свойства значения которых задаются в числовом виде, Анимация «по сценарию» Animation - анимация «по сценарию»Анимация «по сценарию» состоит из двух шагов. Первый шаг: создается «сценарий» Animation - анимация «по сценарию»Анимация «по сценарию» состоит из двух шагов. Второй шаг: при помощи Анимация по «сценарию»http://files.courses.dp.ua/web/05/ex05.htmlСостоит из двух шагов. Первый шаг: создается «сценарий» при помощи директивы @keyframes задаются Браузер проигрывает сценарий делая плавные переходы между состояниями для опорных кадров, сценарий может быть проигран CSS Библиотеки Font Awesome – иконки на базе CSShttp://fontawesome.io/ Как работает Font Awesome на примереhttps://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css Font Awesome – иконки на базе CSSFont Awesome – CSS-библиотека содержащая в своём составе огромное Сокраще… Сокращение текстаCSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить Сокращение текстаCSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить Для тренировки Где взять задания для тренировки?http://www.itmathrepetitor.ru/zadachi-po-html-i-css/

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

Слайд 1 CSS, часть 5
sp.courses.dp.ua

CSS, часть 5sp.courses.dp.ua

Слайд 2 По домашнему
заданию

По домашнему заданию

Слайд 3 Сверстать страницу, которая при ширине экрана больше 1000 пикселей выводит 5 столбцов

Сверстать страницу, которая при ширине экрана больше 1000 пикселей выводит 5 столбцов со статьями, от
со статьями, от 800 до 1000 – четыре столбца, от 600 до 800 – три столбца, от 400 до 600 – два столбца, на экранах шириной в 400 пикселей и меньше – один столбец.

Слайд 4 Вариант решения
http://files.courses.dp.ua/web/css/ex01.html
Скопируйте заготовку по адресу:

Вариант решенияhttp://files.courses.dp.ua/web/css/ex01.htmlСкопируйте заготовку по адресу:

Слайд 5 Анимация средствами CSS

Анимация 
 средствами CSS

Слайд 6 Анимация на веб-странице это, как правило, изменение во времени того или иного

Анимация на веб-странице это, как правило, изменение во времени того или иного стилевого (css) свойства
стилевого (css) свойства элемента во времени.

До появления CSS 3 анимация делалась исключительно средствами JavaScript, но ничто не стоит на месте.


Слайд 7 На самом деле CSS не позволяет сделать полноценную интерактивную анимацию, но CSS

На самом деле CSS не позволяет сделать полноценную интерактивную анимацию, но CSS позволяет сделать анимированный
позволяет сделать анимированный переход между значениями стилевого правила. Другими словами: сделать плавный переход между двумя состояниями.

Однако получается у него это великолепно: http://jsbin.com/eRiMeDE/2/edit?html,css,output


Слайд 8 Два подхода к анимации в CSS
2. Заранее определенный сценарий, который просто проигрывается

Два подхода к анимации в CSS2. Заранее определенный сценарий, который просто проигрывается и базируется на
и базируется на правиле animation.

1. Плавный переход между состояниями некоторых правил, базируется на правиле transition.


Слайд 9 Анимация переходов

Анимация переходов

Слайд 10 Transition – переходы между состояниями

Transition – переходы между состояниями

Слайд 11 Transition – переходы между состояниями
Анимировать можно только те свойства значения которых задаются

Transition – переходы между состояниямиАнимировать можно только те свойства значения которых задаются в числовом виде,
в числовом виде, и браузер может рассчитать изменение этих значений во времени;
Чтобы анимация перехода работала необходимо указывать начальное значение свойства, т.к. значение с которого начнётся переход.

Слайд 12 Анимация «по сценарию»

Анимация «по сценарию»

Слайд 13 Animation - анимация «по сценарию»
Анимация «по сценарию» состоит из двух шагов.
Первый

Animation - анимация «по сценарию»Анимация «по сценарию» состоит из двух шагов. Первый шаг: создается «сценарий»
шаг: создается «сценарий» при помощи директивы @keyframes задаются «опорные кадры» т.е. состояния через которые наша анимация должна проходить.

Слайд 14 Animation - анимация «по сценарию»
Анимация «по сценарию» состоит из двух шагов.
Второй

Animation - анимация «по сценарию»Анимация «по сценарию» состоит из двух шагов. Второй шаг: при помощи
шаг: при помощи правила animation «сценарий» крепиться к какому-либо элементу.



Слайд 15 Анимация по «сценарию»
http://files.courses.dp.ua/web/05/ex05.html
Состоит из двух шагов.
Первый шаг: создается «сценарий» при помощи

Анимация по «сценарию»http://files.courses.dp.ua/web/05/ex05.htmlСостоит из двух шагов. Первый шаг: создается «сценарий» при помощи директивы @keyframes задаются
директивы @keyframes задаются «опорные кадры» т.е. состояния через которые наша анимация должна проходить.
Второй шаг: при помощи правила animation «сценарий» крепиться к какому-либо элементу.

Слайд 16 Браузер проигрывает сценарий делая плавные переходы между состояниями для опорных кадров, сценарий

Браузер проигрывает сценарий делая плавные переходы между состояниями для опорных кадров, сценарий может быть проигран
может быть проигран однократно, или многократно, при многократном повторении необходимо позаботиться о «склейке» финального и начального кадра.

Анимация по «сценарию»


Слайд 17 CSS Библиотеки

CSS Библиотеки

Слайд 18 Font Awesome – иконки на базе CSS
http://fontawesome.io/

Font Awesome – иконки на базе CSShttp://fontawesome.io/

Слайд 19 Как работает Font Awesome на примере
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Как работает Font Awesome на примереhttps://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Слайд 20 Font Awesome – иконки на базе CSS
Font Awesome – CSS-библиотека содержащая в

Font Awesome – иконки на базе CSSFont Awesome – CSS-библиотека содержащая в своём составе огромное
своём составе огромное количестве векторных иконок, «на все случаи жизни».

Использовать иконки из состава библиотеки просто – достаточно указать для любого строчного элемента класс fa и класс конкретной иконки например fa-facebook в результате иконка будет вставлена в качестве ::before для тега.

Слайд 21 Сокраще…

Сокраще…

Слайд 22 Сокращение текста
CSS предоставляет возможность сокращать текст который не помещается в пределы блока,

Сокращение текстаCSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить
и автоматически ставить троеточие. Работает только для блочных элементов.

Скопируйте код разметки в notepad++.

http://files.courses.dp.ua/web/04/ex02.html


Слайд 23 Сокращение текста
CSS предоставляет возможность сокращать текст который не помещается в пределы блока,

Сокращение текстаCSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить
и автоматически ставить троеточие. Работает только для блочных элементов.

Скопируйте код разметки в notepad++.

http://files.courses.dp.ua/web/04/ex02.html


Слайд 24 Для тренировки

Для тренировки

Слайд 25 Где взять задания для тренировки?
http://www.itmathrepetitor.ru/zadachi-po-html-i-css/

Где взять задания для тренировки?http://www.itmathrepetitor.ru/zadachi-po-html-i-css/

  • Имя файла: animatsiya-sredstvami-css-chast-5.pptx
  • Количество просмотров: 56
  • Количество скачиваний: 0