1 Выравнивание с FlexBox Layout
<html> <head> <title>Flex</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="out"> <div class="in">1</div> <div class="in">2</div> <div class="in">3</div> <div class="in">4</div> <div class="in">5</div> </div> </body> </html>
flex-wrap и justify-content:
.out { display: flex; flex-wrap: wrap; justify-content: center; /* flex-start; flex-end; space-around; space-between */ }
align-items:
.out { height: 100%; display: flex; flex-wrap: wrap; align-items: center; /* stretch; flex-start; flex-end; */ }
2 Трансформация объектов
<html> <head> <title>Flex</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="block"> </div> </body> </html>
База для style.css
html, body { height: 100%; margin: 0; } body { display: flex; justify-content: center; align-items: center; }
2.1 Transform Rotate (Поворот)
Чтобы увидеть изменения через трансформацию, будем использовать события:
- hover - курсор мышки расположен над объектом
- active - нажата левая кнопка мыши
Чтобы одновременно работали оба метода - hover должен быть описан раньше active
Добавки трансформации для style.css
.block { background: linear-gradient(135deg, orange, red); border-radius: 5px; width: 300px; height: 100px; }
.block:hover { /* поворот на 45 градусов по часовой стрелке */ transform: rotate(45deg) }
.block:active { /* поворот на 155 градусов против часовой стрелки */ transform: rotate(-155deg) }
.block:active { /* поворот на 180 градусов против часовой стрелки */ transform: rotate(-180deg) }
В коде html можно div поменять на button и применить ещё одно событие focus.
2.2 Transform Scale (Масштабирование)
.block:active { /* уменьшить по горизонтали в 1.5 раза и уменьшить по вертикали в 2 раза */ transform: scaleX(1.5) scaleY(0.5) }
.block:active { /* симметрично отразить по общим направлениям, не изменяя размера поворот на 180 градусов */ transform: scale(-1) }
2.3 Transform Skew (Перекос)
.block:active { /* перекос на 30 градусов по горизонтали и 0 градусов по вертикали */ transform: skew(30deg, 0deg); }
2.4 Transform Translate (Перемещение)
.block:active { /* перемещение на 40 пикселей вправо и на 20 пикселей вверх */ transform: translate(40px, -10px); }
3 Transform Transition (Переходы)
.block { background: linear-gradient(135deg, orange, red); border-radius: 5px; width: 300px; height: 100px; transition: transform 1s ease; } .block:active { /* перемещение на 40 пикселей вправо и на 20 пикселей вверх */ transform: translate(40px, -20px); }
4 Анимация
<html> <head> <title>Animation</title> <link rel="stylesheet" href="/3.4.1_Animation_style.css"> </head> <body> <div class="block"> <div class="line" id="ln1">ease</div> <div class="line" id="ln2">ease-in</div> <div class="line" id="ln3">ease-out</div> <div class="line" id="ln4">ease-in-out</div> <div class="line" id="ln5">linear</div> </div> </body> </html>
4.1 Анимация при наведении на каждый объект:
html, body { height: 100%; margin: 0; } body { -display: flex; -justify-content: center; -align-items: center; } .block { font-size: 54px; text-align: center; color: white; -display: flex; -flex-wrap: wrap; transition: transform width 3.5s; } .container:hover > .strip { width: 100%; } .line { background-color: red; border: 1px solid black; margin: 15px; border-radius: 10px; width: 250px; } .line:hover { width: 90%; } #ln1:hover { transition: transform width 1s ease; } #ln2:hover { transition: transform width 1s ease-in; } #ln3:hover { transition: transform width 1s ease-out; width: 90%; } #ln4:hover { transition: transform width 1s ease-in-out; width: 90%; } #ln5:hover { transition: transform width 1s linear; width: 90%; } #-ln1:hover > ln2 { width: 90%; }
4.2 Групповая анимация при наведении на один из объектов группы:
.block { font-size: 54px; text-align: center; color: white; } .line { background-color: red; border: 1px solid black; margin: 15px; border-radius: 10px; width: 250px; } .block:hover > #ln1 { transition: width 1.1s ease 0.1s; width: 95%; } .block:hover > #ln2 { transition: width 1.1s ease-in-out 0.1s; width: 95%; } .block:hover > #ln3 { transition: width 1.1s ease-out 0.1s; width: 95%; } .block:hover > #ln4 { transition: width 1.1s ease-in-out 0.1s; width: 95%; } .block:hover > #ln5 { transition: width 1.1s linear 0.1s; width: 95%; }