Java, UX, HTML, CSS, WEB-design

Чистая CSS-анимация фрагмента сообщения в блоге при наведении

Краткое описание по статье Чистая CSS-анимация фрагмента сообщения в блоге при наведении

Название: Чистая CSS-анимация фрагмента сообщения в блоге при наведении . Краткое описание: [ad_1] ⭐ В этом уроке мы создадим эту крутую анимаци . Дата публикации: 22.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

В этом уроке мы создадим эту крутую анимацию, показывающую отрывок из сообщения в блоге при наведении курсора, используя чистый CSS и без JavaScript. GIF ниже показывает, что вы сможете создать к концу этого. Вы должны иметь базовые знания HTML и CSS, чтобы следовать этому руководству.

Чистая CSS-анимация

Это простая и аккуратная анимация, которую можно использовать на странице со списком постов в блоге. Каждое сообщение в списке (или сетке) сначала показывает только избранное изображение с заголовком. Когда вы наводите курсор в любом месте изображения, фон увеличивается, а заголовок медленно перемещается вверх, открывая отрывок, ссылку «подробнее», дату публикации и время для чтения. Давайте начнем!

Ваш набор инструментов веб-дизайнера

Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна
Начинается с всего $16,50/месяц!


Настройка

Создайте пустой документ HTML и назовите его index.html. Добавьте основной скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы закончите с этим.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
  
</body>
</html>

Создайте свою таблицу стилей и назовите ее styles.css. Свяжите таблицу стилей с вашим HTML-документом ниже <title> пометить с помощью

<link rel="stylesheet" href="styles.css" type="text/css">

Я использовал шрифт «Lato» для текста и «Font Awesome» для значков. Поэтому добавьте следующие две строки под тегом title перед строкой таблицы стилей, чтобы иметь возможность использовать эти шрифты.

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

HTML и CSS

У каждого разработчика свой подход к работе. Некоторые разработчики сначала создают полный HTML, а затем приступают к работе с CSS. Однако я предпочитаю делать и то, и другое одновременно, потому что это помогает мне видеть, как результат обретает форму постепенно. Чтобы упростить вам задачу, я разделил следующий процесс на две части.

Часть 1

В первой части мы достигнем этого:

  1. Создать запись в блоге
  2. Установить фоновое изображение
  3. Увеличение изображения при наведении
  4. Добавьте на изображение темный фон, который темнеет при наведении

HTML

Сначала добавьте div в открытие и закрытие body теги с классом "wrapper". Это действует как контейнер. Внутри этого находится один элемент сообщения в блоге в article тег. Дайте ему имя класса "post".

<div class="wrapper">
   
<article class="post">
      
   </article>

</div>

Фоновое изображение не может быть добавлено к этому article элемент напрямую, потому что нам нужно применить эффект масштабирования. Следовательно, давайте создадим пустой div внутри article только для этого.

<div class="post-bg"></div>

Если вы откроете это в своем браузере, вы еще ничего не увидите! Итак, пришло время немного CSS.

CSS

Добавьте эти основные стили в styles.css:

body{
   font-family: 'Lato',sans-serif;
   line-height: 1.5;
}
a{
   color: #fff;
   text-decoration: none;
}
a:hover{
   color: #b1fffa; /* A bright green color */
}
.wrapper{
   margin: auto; /* This is to center the content on page */
   width: 1100px; /* You can change this value for smaller screens using media queries */
   padding: 40px;
}

Затем добавьте стили к элементу статьи:

article.post{
   position: relative;
   width: 515px; /* You can change this value for smaller screens using media queries */
   height: 450px; /* Height is required */
   overflow: hidden;
}

Необходимо установить свойство position, потому что мы будем абсолютно позиционировать его дочерние элементы — заголовок, отрывок и другой текст. overflow: hidden заключается в том, чтобы убедиться, что этот блок не расширяется, когда дочерний фоновый элемент преобразуется для создания эффекта масштабирования. Вы поймете это буквально через минуту.

Теперь нам нужно добавить стили в div мы разместили для нашего фонового изображения.

.post-bg{
   width: 100%;
   height: 100%;
   background-image: url('https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
   background-position: center;
   background-size: cover;
   transition: all .7s;
}

Я использовал прямую ссылку на изображение с pexels.com. Вы можете использовать собственное изображение. CSS transition Свойство используется для установки свойств, которые необходимо анимировать (в нашем случае это all) и время перехода (мы установили его на 0,7 секунды). Обратитесь к CSS-переходам на w3schools.com для получения более подробной информации.

Вот фрагмент кода, используемый для эффекта масштабирования:

.post:hover .post-bg,
.post:focus .post-bg {
   transform: scale(1.1);
}

Теперь проверьте свой браузер. И если вы все сделали правильно, вы увидите изображение поста в блоге, и когда вы наведете на него указатель мыши, изображение увеличится.

Чистая CSS-анимация фрагмента сообщения в блоге при наведении

Как вы можете видеть в приведенном выше CSS, мы на самом деле просто увеличиваем размер (используя transform) из .post-bg div в 1,1 раза, когда его родительский элемент находится в фокусе. Но так как родитель overflow свойство установлено на hidden, вы чувствуете, что изображение увеличивается.

Затем, если вы внимательно посмотрите, на это изображение накладывается темный фон. А при наведении мыши оверлей становится темнее. Чтобы добавить это наложение, нам нужно использовать ::after чтобы создать псевдоэлемент и задать стили следующим образом.

.post-bg::after {
   content: '';
   background: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   transition: all .7s;
}

То position:absolute вместе с width и height При значении 100% этот псевдоэлемент полностью закрывает изображение. Цвет фона черный с непрозрачностью 0,5. Опять же, transition свойство для анимации.

Добавьте приведенный ниже код, чтобы увеличить прозрачность, когда родительский элемент .post наведен/сфокусирован.

.post:hover .post-bg::after,
.post:focus .post-bg::after {
   background: rgba(0, 0, 0, 0.7);
}

Непрозрачность 0.5 меняется на 0.7. Это работает!

Часть 2

У нас есть фон. Теперь добьемся следующего:

  1. Добавьте заголовок, отрывок, ссылку «Подробнее», дату публикации и время для чтения
  2. Поместите вышеуказанные элементы в соответствующие позиции
  3. Сначала отображать только заголовок в центре (скрыть остальные элементы)
  4. Анимируйте заголовок и одновременно покажите другие элементы

HTML

После .post-bg div, давайте добавим все необходимые элементы. Часть HTML в основном не требует пояснений.

<h2 class="post-title">
   <a href="#">Pure CSS Animation of Blog Post Excerpt on Hover</a>
</h2>



   The excerpt of your post that compels the user to click on "Read More" link below


<a class="post-read-more" href="#">
Read More
<i class="fa fa-arrow-right"></i>
</a>

<div class="post-date-time">
   <span class="post-icon-text">
      <i class="fa fa-calendar"></i>
      June 1, 2020
   </span>
   <span class="post-icon-text">
      <i class="fa fa-clock"></i>
      8 Minutes Read
   </span>
</div>

Если вы сейчас проверите свой браузер, вы вообще не увидите никаких изменений. Куда делись все элементы? Вы можете использовать инструмент инспектора вашего браузера и проверить. Они были вытеснены .post-bg div и не видны, потому что overflow свойство .post установлено в hidden. Давайте поработаем над CSS.

CSS

Лучший способ получить каждый из них на месте — установить position собственность на absolute и используя top, left и right свойства для выравнивания.

.post-title, .post-excerpt, .post-read-more, .post-date-time {
   position: absolute;
   top: 20%;
   left: 8%;
   right: 8%;
   text-align: center;
   overflow: hidden;
}

Конечно, сейчас вы увидите, что все перекрывается. Давайте зададим разные значения свойству top и правильно разместим их — так, как мы хотим, чтобы они были раскрыты.

.post-title{
   top: 15%;
}
.post-excerpt{
   top: 46%;
}
.post-read-more{
   top: 67%;
}
.post-date-time{
   top: 80%;
}

Это задает положение элементов, но нам нужны дополнительные стили, чтобы получить правильные размеры шрифта и интервалы. Замените приведенный выше код следующим:

.post-title{
   top: 15%;
   max-height: 120px; /* This is to make sure that longer titles are truncated */
}
.post-title a{
   font-size: 1.4em;
   line-height: 1;
}
.post-excerpt{
   top: 46%;
   max-height: 82px; /* This is to make sure that longer excerpts are truncated */
   font-size: 1.1em;
}
.post-excerpt:after{
   content: '...';
}
.post-read-more{
   top:67%;
   font-weight: bold;
   font-size: 1.1em;
}
.post-date-time{
   top: 80%;
   font-size: 0.8em;
}
.post-icon-text {
   padding: 0 10px;
}
i.fa{
   padding: 0 5px;
}

Это выглядит идеально!

Чистая CSS-анимация фрагмента сообщения в блоге при наведении

Давайте скроем все элементы, кроме заголовка, просто установив opacity к 0.

.post-excerpt, .post-read-more, .post-date-time {
   opacity: 0;
}

Изменить верхнее значение .post-title к 35% — чтобы он появился в центре. Кроме того, максимальное значение .post-date-time к 90% потому что дата и время скользят снизу вверх.

Вы зашли очень далеко! Единственная оставшаяся часть — это фактическая анимация, которая проста. Во-первых, установите свойство перехода для всех четырех элементов:

.post-title, .post-excerpt, .post-read-more, .post-date-time {
   transition: all 0.5s;
}

Теперь давайте установим свойства каждого элемента при наведении.

То top свойство .post-title на .post парить

.post:hover .post-title{
   top: 15%;
}

То opacity из .post-excerpt и .post-read-more

.post:hover .post-excerpt, .post:hover .post-read-more{
   opacity: 1;
}

То top и opacity свойства .post-date-time

.post:hover .post-date-time{
   top: 80%;
   opacity: 1;
}

И вот! Ты сделал это.

Теперь вы знаете, как создать эффект масштабирования на фоновом изображении, как добавить наложение на фоновое изображение и как анимировать различные элементы с помощью чистой CSS-анимации. На всякий случай, если вы не получили ожидаемого результата, я вас прикрою. Загрузите полный исходный код здесь и сравните свой с этим.

Исходный код

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Чистая CSS-анимация фрагмента сообщения в блоге при наведении

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»