Как я могу оживить мое письмо с помощью JavaScript

Question

Мне интересно, как можно сделать так, чтобы буква «Диагональ» в виде буквы «L» над логотипом «Барами» <маленькое изображение логотипа в верхнем левом углу можно было анимировать, поэтому при наведении на этот маленький логотип буква L исчезает иначинает медленно появляться слева направо, похоже на </p>

 
div { 
display: inline-block; 
overflow: hidden; 
white-space: nowrap; 
animation: example 2s linear 0s infinite alternate; 
} 
@keyframes example { from { width: 0; } to { width: 75px; } } 

<div>L</div>

ссылка: https://www.barami.ge/#main

Answer 1

Это может быть достигнуто путем анимации ширины абсолютно позиционированного CSS-псевдоэлемента с фоновым изображением поверх изображения логотипа.Вот грубый пример во фрагменте ниже.

Однако, это просто чтобы показать вам сущность того, как вы могли бы это сделать. Я настоятельно рекомендую разделить логотип на два изображения: одно с «<» в верхней части и одно изображение с текстом </strong>.Вложите оба изображения в элемент, затем поместите изображение с «<» в верхнюю часть контейнера, добавьте немного дополнительных отступов в верхнюю часть родительского контейнера, а затем, наконец, добавьте анимацию. </p> .logo { position: relative; display: flex; overflow: hidden; background: black; width: 300px; height: 158px; } .logo:before { content: ""; display: block; background-image: url(https://www.barami.ge/assets/userarea/logo.png); background-size: 300px auto; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .logo:hover:before { animation: example 2s linear 0s infinite alternate; } .logo__inner { width: 300px; height: 70px; overflow: hidden; align-self: flex-end; display: flex; } img { display: block; width: 300px; height: 158px; align-self: flex-end; } @keyframes example { from { width: 0; } to { width: 100%; } } <div class="logo"> <div class="logo__inner"> <img src="https://www.barami.ge/assets/userarea/logo.png"> </div> </div>