Компонент «Пользователь пишет сообщение» на чистом CSS
В данной статья я покажу Вам, как можно создать компонент, который часто используется в мессенджерах и других приложениях с функцией онлайн-чата, при информировании одного из собеседников о печатании сообщения другим. Делать мы его будем на чистом CSS.
Итак, вот код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пользователь пишет</title>
<meta name="theme-color" content="#ffff00">
<style>
/* сам компонент */
.bubble {
background-color: #c8fcb3;
height: 36px;
width: 64px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 18px;
border-top-left-radius: 4px;
}
/* точка в компоненте */
.point {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #7ae251;
/* анимация */
animation: bounce 700ms infinite;
}
.point:nth-of-type(2) {
animation-delay: 50ms;
}
.point:nth-of-type(3) {
animation-delay: 100ms;
}
@keyframes bounce {
/* начальная позиция точки при анимации */
0% { transform: translateY(0); }
/* промежуточная */
20% { transform: translateY(-5px); }
/* последняя позиция */
40% { transform: translateY(0); }
}
</style>
</head>
<body>
<div class="bubble">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
Таким образом, мы сделали простейший компонент — сообщающий о том, что пользователь пишет сообщение,
который затем можно добавлять в разметке там, где он необходим.
