Компонент "Пользователь пишет сообщение" на чистом 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>
Таким образом, мы сделали простейший компонент - сообщающий о том, что пользователь пишет сообщение, который затем можно добавлять в разметке там, где он необходим.
-
Создано 20.01.2022 12:30:29
-
Михаил Русаков
Комментарии (5):
Немного не понимаю как мне можно его к себе поставить... Что то не так явно делаю, но штука явно годная.
Ответить
Здравствуйте. Просто берете себе стили и блок с классом bubble и используете там, где Вам нужно. Например, в разметке есть условие - если пользователь пишет сообщение (данные с сервера), то отображаете блок.
Ответить
я пока не могу реализовать, только пытаюсь понять)
Ответить
Оно у меня просто появляется)
Ответить
Не понимаю.... Не выходит..
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.