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

Сентябрь 6, 2022

Главная
Алгебра
Анимация средствами CSS. (Часть 5)

Содержание

2. По домашнему заданию
3. Сверстать страницу, которая при ширине экрана больше 1000 пикселей выводит 5 столбцов со статьями, от 800
4. Вариант решения http://files.courses.dp.ua/web/css/ex01.html Скопируйте заготовку по адресу:
5. Анимация средствами CSS
6. Анимация на веб-странице это, как правило, изменение во времени того или иного стилевого (css) свойства элемента
7. На самом деле CSS не позволяет сделать полноценную интерактивную анимацию, но CSS позволяет сделать анимированный переход
8. Два подхода к анимации в CSS 2. Заранее определенный сценарий, который просто проигрывается и базируется на
9. Анимация переходов
10. Transition – переходы между состояниями
11. Transition – переходы между состояниями Анимировать можно только те свойства значения которых задаются в числовом виде,
12. Анимация «по сценарию»
13. Animation - анимация «по сценарию» Анимация «по сценарию» состоит из двух шагов. Первый шаг: создается «сценарий»
14. Animation - анимация «по сценарию» Анимация «по сценарию» состоит из двух шагов. Второй шаг: при помощи
15. Анимация по «сценарию» http://files.courses.dp.ua/web/05/ex05.html Состоит из двух шагов. Первый шаг: создается «сценарий» при помощи директивы @keyframes
16. Браузер проигрывает сценарий делая плавные переходы между состояниями для опорных кадров, сценарий может быть проигран однократно,
17. CSS Библиотеки
18. Font Awesome – иконки на базе CSS http://fontawesome.io/
19. Как работает Font Awesome на примере https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
20. Font Awesome – иконки на базе CSS Font Awesome – CSS-библиотека содержащая в своём составе огромное
21. Сокраще…
22. Сокращение текста CSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить
23. Сокращение текста CSS предоставляет возможность сокращать текст который не помещается в пределы блока, и автоматически ставить
24. Для тренировки
26. Скачать презентацию

Слайд 2

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

Слайд 3

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

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

Слайд 4

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

Слайд 5

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

Слайд 6

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

иного стилевого (css) свойства элемента во времени.

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

Слайд 7

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

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

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

Слайд 8

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

проигрывается и базируется на правиле animation.

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

Слайд 9

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

Слайд 10

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

Слайд 11

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

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

Слайд 12

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

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

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

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

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

Слайд 17

CSS Библиотеки

Слайд 18

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

Слайд 19

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

Слайд 20

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

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

Слайд 21

Сокраще…

Слайд 22

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

блока, и автоматически ставить троеточие. Работает только для блочных элементов.

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

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

Слайд 23

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

блока, и автоматически ставить троеточие. Работает только для блочных элементов.

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

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

Слайд 24

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

Содержание

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

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

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

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

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

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

Два подхода к анимации в CSS2. Заранее определенный сценарий, который просто

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

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

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

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

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

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

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

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

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://files.courses.dp.ua/web/css/ex01.html
Скопируйте заготовку по адресу:

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

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

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

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

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

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

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

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

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

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