со статьями, от 800 до 1000 – четыре столбца, от 600 до 800 – три столбца, от 400 до 600 – два столбца, на экранах шириной в 400 пикселей и меньше – один столбец.
Презентация на тему Анимация средствами CSS. (Часть 5)
Содержание
- 1. Анимация средствами CSS. (Часть 5)
- 2. По домашнему заданию
- 3. Сверстать страницу, которая при ширине экрана больше 1000
- 4. Вариант решенияhttp://files.courses.dp.ua/web/css/ex01.htmlСкопируйте заготовку по адресу:
- 5. Анимация средствами CSS
- 6. Анимация на веб-странице это, как правило, изменение во
- 7. На самом деле CSS не позволяет сделать полноценную
- 8. Два подхода к анимации в CSS2. Заранее определенный
- 9. Анимация переходов
- 10. Transition – переходы между состояниями
- 11. Transition – переходы между состояниямиАнимировать можно только те
- 12. Анимация «по сценарию»
- 13. Animation - анимация «по сценарию»Анимация «по сценарию» состоит
- 14. Animation - анимация «по сценарию»Анимация «по сценарию» состоит
- 15. Анимация по «сценарию»http://files.courses.dp.ua/web/05/ex05.htmlСостоит из двух шагов. Первый шаг:
- 16. Браузер проигрывает сценарий делая плавные переходы между состояниями
- 17. CSS Библиотеки
- 18. Font Awesome – иконки на базе CSShttp://fontawesome.io/
- 19. Как работает Font Awesome на примереhttps://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
- 20. Font Awesome – иконки на базе CSSFont Awesome
- 21. Сокраще…
- 22. Сокращение текстаCSS предоставляет возможность сокращать текст который не
- 23. Сокращение текстаCSS предоставляет возможность сокращать текст который не
- 24. Для тренировки
- 25. Где взять задания для тренировки?http://www.itmathrepetitor.ru/zadachi-po-html-i-css/
- 26. Скачать презентацию
- 27. Похожие презентации
Слайды и текст этой презентации
Слайд 6 Анимация на веб-странице это, как правило, изменение во времени того или иного
стилевого (css) свойства элемента во времени.
До появления CSS 3 анимация делалась исключительно средствами JavaScript, но ничто не стоит на месте.
Слайд 7 На самом деле CSS не позволяет сделать полноценную интерактивную анимацию, но CSS
позволяет сделать анимированный переход между значениями стилевого правила. Другими словами: сделать плавный переход между двумя состояниями.
Однако получается у него это великолепно: http://jsbin.com/eRiMeDE/2/edit?html,css,output
Слайд 8
Два подхода к анимации в CSS
2. Заранее определенный сценарий, который просто проигрывается
и базируется на правиле animation.
1. Плавный переход между состояниями некоторых правил, базируется на правиле transition.
Слайд 11
Transition – переходы между состояниями
Анимировать можно только те свойства значения которых задаются
в числовом виде, и браузер может рассчитать изменение этих значений во времени;
Чтобы анимация перехода работала необходимо указывать начальное значение свойства, т.к. значение с которого начнётся переход.
Чтобы анимация перехода работала необходимо указывать начальное значение свойства, т.к. значение с которого начнётся переход.
Слайд 13
Animation - анимация «по сценарию»
Анимация «по сценарию» состоит из двух шагов.
Первый
шаг: создается «сценарий» при помощи директивы @keyframes задаются «опорные кадры» т.е. состояния через которые наша анимация должна проходить.
Слайд 14
Animation - анимация «по сценарию»
Анимация «по сценарию» состоит из двух шагов.
Второй
шаг: при помощи правила animation «сценарий» крепиться к какому-либо элементу.
Слайд 15
Анимация по «сценарию»
http://files.courses.dp.ua/web/05/ex05.html
Состоит из двух шагов.
Первый шаг: создается «сценарий» при помощи
директивы @keyframes задаются «опорные кадры» т.е. состояния через которые наша анимация должна проходить.
Второй шаг: при помощи правила animation «сценарий» крепиться к какому-либо элементу.
Второй шаг: при помощи правила animation «сценарий» крепиться к какому-либо элементу.
Слайд 16 Браузер проигрывает сценарий делая плавные переходы между состояниями для опорных кадров, сценарий
может быть проигран однократно, или многократно, при многократном повторении необходимо позаботиться о «склейке» финального и начального кадра.
Анимация по «сценарию»
Слайд 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 для тега.
Использовать иконки из состава библиотеки просто – достаточно указать для любого строчного элемента класс fa и класс конкретной иконки например fa-facebook в результате иконка будет вставлена в качестве ::before для тега.
Слайд 22
Сокращение текста
CSS предоставляет возможность сокращать текст который не помещается в пределы блока,
и автоматически ставить троеточие. Работает только для блочных элементов.
Скопируйте код разметки в notepad++.
http://files.courses.dp.ua/web/04/ex02.html
Слайд 23
Сокращение текста
CSS предоставляет возможность сокращать текст который не помещается в пределы блока,
и автоматически ставить троеточие. Работает только для блочных элементов.
Скопируйте код разметки в notepad++.
http://files.courses.dp.ua/web/04/ex02.html
