动感十足！B站动态banner图剖析

2023-10-30 13:42:53





B站作为国内知名的视频分享平台，一直以来以其活跃的社区氛围和优质的内容备受用户的青睐。最近，B站的首页上新增了一个动态的banner图，当鼠标放上之后，banner图中的各个元素（人物/物品）会随之移动，交互性很高且很有吸引力。那么，这个动态banner图是如何实现的呢？

**1. HTML结构解析** 

首先，我们先来看看这个动态banner图的HTML结构。它是由多个div元素组成的，每个div元素代表一个图层。图层中的img元素则代表了图层中的元素。

```html
<div class="layer1">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="layer2">
  <img src="image2.jpg" alt="Image 2">
</div>
<div class="layer3">
  <img src="image3.jpg" alt="Image 3">
</div>

2. CSS样式分析

接下来，我们再来看看这个动态banner图的CSS样式。CSS样式主要用于控制图层的样式和动画效果。

.layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layer2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: move-layer2 10s infinite alternate;
}

.layer3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: move-layer3 10s infinite alternate;
}

@keyframes move-layer2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50px);
  }
}

@keyframes move-layer3 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(50px);
  }
}