javascript - 我怎样才能用javascript为我的信制作动画

Question

我感兴趣的是如何制作“Barami” Logo 上方的对 Angular 线“L”字母<左上角的小 Logo 图像可以制作动画，所以当我将鼠标悬停在那个小 Logo 上时，L 字母消失了&开始从左到右慢慢出现，类似于

 
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

这可以通过在 Logo 图像上使用背景图像对绝对定位的 CSS 伪元素的宽度进行动画处理来实现。请在下面的代码片段中举一个粗略的例子。

但是，这只是向您展示如何执行此操作的要点。 我强烈建议将 Logo 分成两张图片，一张顶部只有“<”字样，另一张带有文字。将两个图像嵌套在一个元素中，然后将带有“<”的图像绝对定位在容器的顶部，在父容器的顶部添加一些额外的填充，最后添加动画。

.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>