Web:4:Kids - Урок 4: FLexBox, трансформация и анимация

Информация о материале
Просмотров: 413

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%;
}