Бегущая строка

Бегущая строка ссылок с паузой при наведении + иконка

  <div class="items-wrap">
    <div class="items marquee">
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Разработка сайтов</a></div>
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Поисковое продвижение</a></div>
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Контекстная реклама</a></div>
    </div>
    <div aria-hidden="true" class="items marquee">
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Разработка сайтов</a></div>
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Поисковое продвижение</a></div>
      <div class="item"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4679 11.9875C21.5384 11.7205 21.812 11.5612 22.079 11.6317L28.838 13.4166C30.8113 13.9376 31.9933 15.9423 31.4605 17.9019L29.6494 24.563C29.5769 24.8295 29.3022 24.9868 29.0357 24.9143C28.7693 24.8419 28.612 24.5671 28.6844 24.3006L30.4955 17.6396C30.8795 16.2272 30.0309 14.7659 28.5827 14.3834L21.8236 12.5986C21.5566 12.5281 21.3974 12.2545 21.4679 11.9875Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.47884 28.1348C8.33776 27.8975 8.41726 27.5931 8.6564 27.455L27.2328 16.7299C27.4719 16.5919 27.7802 16.6724 27.9212 16.9098C28.0623 17.1471 27.9828 17.4515 27.7437 17.5896L9.16731 28.3147C8.92816 28.4527 8.61993 28.3722 8.47884 28.1348Z" ></path>
</svg><a href="">Контекстная реклама</a></div>
    </div>
  </div>
  <div class="perfscan">
 </div>

.items-wrap {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 20px;
  width: 100%;
}

.items-wrap:before,
.items-wrap:after {
  content: "";
  height: 100%;
  top: 0;
  width: 10%;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.items-wrap:before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.items-wrap:after {
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.items {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  counter-reset: item;
  justify-content: space-around;
  min-width: 100%;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding-right: 5px;
  font-weight: 400;
}

.item:hover {
  transform: scale(1.05);
  background: #000;
}

.item:hover a {
  color: #fff;
}

.item:hover svg {
  fill: #fff;
  transform: rotate(30deg);
  margin-top: -4px;
}

.item svg {
  fill: #7C10AE;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.marquee {
  animation: scroll-right 20s linear infinite;
}

.items-wrap:hover .marquee {
  animation-play-state: paused;
}

@keyframes scroll-right {
  from {
    transform: translateX(calc(-100% - 20px));
  }
  to {
    transform: translateX(0);
  }
}