可水平滚动的标签集中在中心位置，靠齐抖动

是一种常见的前端开发效果，通常用于展示多个标签或导航项，使其在一定宽度的容器中水平滚动，并保持集中在中心位置，同时在滚动过程中产生一定的抖动效果。

这种效果可以通过使用HTML、CSS和JavaScript来实现。以下是一种可能的实现方式：

HTML结构：

<div class="container">
  <div class="scrollable-wrapper">
    <ul class="scrollable-list">
      <li>标签1</li>
      <li>标签2</li>
      <li>标签3</li>
      <li>标签4</li>
      <li>标签5</li>
      <li>标签6</li>
      <li>标签7</li>
      <li>标签8</li>
      <li>标签9</li>
      <li>标签10</li>
    </ul>
  </div>
</div>

CSS样式：

.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scrollable-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scroll 10s linear infinite;
}

.scrollable-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.scrollable-list li {
  margin-right: 20px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript代码：

// 可选：根据实际情况调整滚动速度和停顿时间
const scrollSpeed = 50; // 滚动速度，单位：像素/秒
const pauseTime = 2000; // 停顿时间，单位：毫秒

const scrollableWrapper = document.querySelector('.scrollable-wrapper');
const scrollableList = document.querySelector('.scrollable-list');

// 获取滚动列表的宽度
const listWidth = scrollableList.offsetWidth;

// 设置滚动容器的宽度，使滚动列表居中
scrollableWrapper.style.width = listWidth + 'px';

// 根据滚动速度计算动画持续时间
const animationDuration = listWidth / scrollSpeed;

// 设置动画持续时间和停顿时间
scrollableWrapper.style.animationDuration = animationDuration + 's';
scrollableWrapper.style.animationDelay = pauseTime / 1000 + 's';

上述代码中，我们使用了CSS的@keyframes规则来定义滚动动画，通过transform: translateX()来实现水平滚动效果。JavaScript部分用于动态计算滚动容器和滚动列表的宽度，并设置动画的持续时间和停顿时间。

这种可水平滚动的标签集中在中心位置，靠齐抖动效果适用于需要展示多个标签或导航项的场景，例如网页顶部的导航栏、图片轮播等。通过滚动和抖动的效果，可以吸引用户的注意力，提升用户体验。

腾讯云相关产品和产品介绍链接地址：