Проектирование и дизайн ИС Практическая работа №19

Практическое занятие №19

Цель работы: Создание анимации из геометрических фигур с помощью CSS

Приобретаемые умения и навыки: Умение работать с CSS

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

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

Давайте применим CSS чтобы сделать хотя бы простую, но симпатичную валентинку для дорогого человека которая будет еще и анимированная.

Ход работы

Как сделать сердце на CSS из простейших геометрических фигур? Очень просто: достаточно двух кругов и одного квадрата, повернутого на 45 градусов.

В CSS мы легко можем обойтись одним контейнером – привлечем к делу псевдоселекторы :before и :after. Это псевдоэлементы, которые вроде есть, но нет. В HTML и DOM вы их не найдете, но если добавить стили, то на странице они появятся. :before вставляется перед контентом блока, а :after – после.

Файл HTML

Мы создадим HTML файл в который поместим блок div c классом heart, для создания нашей анимации этого будет достаточно.Также не забываем о подключении CSS файла к HTML

Файл CSS

Далее мы приступим к наполнению CSS файла

Шаг 1.

Первое что мы пропишем это настройки для тега body.

1. Цвет фона нашего элемента. Значение задайте #fff

2. Установим padding с первым значением 40 пикселей и вторым нулевым

Шаг 2.

Далее мы будем создавать первый элемент нашего анимированного сердца. первый блок с классом heart – это квадрат, повернутый на 45 градусов против часовой стрелки с помощью свойства transform.

Мы создадим селектор класса heart в который поместим следующие свойства:

1. Цвет фона нашего элемента. Цвет будет красный

2. Свойство display со значением inline-block;

3. Высоту в 50 пикселей

4. Установим margin с первым значением 0 и вторым 10 пикселей

5. Позиционирование элемента со значением relative

6. Свойсво top со значением 0

7. Повернем наш квадрат на 45 градусов (против часовой стрелки)

8. Установим позиционирование элемента со значением absolute

9. Установим свойство left со значением 45% и top со значением 45%

10. Установим ширину в 50 пикселей

У нас должно получиться вот такой квадрат

Шаг 3.

Для мы создадим 2 псевдоэлементы :before и :after – такие же квадраты, однако углы у них будут скруглены на 50%, поэтому выглядят они как круги.

.heart:before,

.heart:after { … }

Для них зададим следующие настройки:

1. Зададим свойство content: "" (оставим пустым)

2. Цвет фона нашего элемента. Цвет будет красный

3. Закругление углов у на будет 50 пикселей

4. Высоту 50 пикселей

5. Установим позиционирование элемента со значением absolute

6. Ширину 50 пикселей

Шаг 4.

Далее мы пропишем настройки для каждого псевдоэлемента :before и :after по отдельности:

Для .heart:before {…}

1. Свойсво top со значением -25 пикселей

2. Свойсво left со значением 0

Для .heart:after {…}

1. Свойсво top со значением 0

2. Свойсво left со значением 25 пикселей

После этого у нас получится следующие:

Шаг 5.

Теперь давайте оживим наше сердце добавив немного анимации. На помощь спешит CSS-правило @keyframes, в котором можно определить один цикл анимации.

1. Начинается все (0%) без трансформаций.

2. На 20% от общего времени фигура достигает 125% от исходного размера.

3. К 40% она увеличивается до 150%.

4. Оставшиеся 60% времени происходит постепенное уменьшение до первоначального состояния.

И последнее

Запустим наше сердце с помощью правила animation

.heart {

animation: heartbeat 1s infinite;

...

}

Готово сердце забилось!

Контрольные вопросы:

1. Какие CSS-свойства можно использовать для изменения формы элемента?

2. Что такое псевдоэлементы ::before и ::after и как их использовать?