Share code

Hiệu ứng thông báo khuyến mãi chạy ngang cho website wordpress

by nhaklamweb

Đầu tiên chèn code HTML vào shortcode hoặc thẻ P trong website của bạn và thay các text mong muốn

<div class="container">
  <div class="list">
    <div class="item">
To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  
</div>
  <div class="list">
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  <div class="item">To infinity and beyond<span>&nbsp;</span></div>
  
</div>
</div>

Sau đó chèn code css vào file style.css và tận hưởng thành quả

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #282828;
}
.container {
  display: flex;
  white-space: nowrap;
}

.list {
  display: flex;
  font-size: 5vw;
  -webkit-animation: loop 20s infinite linear;
  animation: loop 20s infinite linear;
}

.item {color: #00ffb6;}

@keyframes loop {
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}