前端的問題，想請問怎麼實現這種CSS(或是JS

前端菜鳥前端前端新手村網頁前端網頁設計

jason07 2023-02-07 21:42:25 ‧ 1692 瀏覽

分享至

各位前輩好，最近在嘗試練習切版，找各種素材，看到一個滿有趣的效果：

參考來源是：https://www.rakuya.com.tw/search/rent_search

大概知道是用偽元素的概念，不太清楚JS部分怎麼讓他往下且消失的，
該怎麼完成呢？

拉格那洛克 iT邦新手 4 級 ‧ 2023-02-07 22:26:33 檢舉

純CSS就能完成了吧。
偽元素中使用content，分別輸入NEW跟地圖。
然後使用animation屬性，做無線輪播圖。

jason07 iT邦新手 5 級 ‧ 2023-02-08 17:54:42 檢舉

謝謝樓上分析

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

JamesDoge

iT邦高手 1 級 ‧ 2023-02-08 07:48:37

最佳解答

使用CSS的偽元素輪播圖的範例：

HTML:

<div class="container">
  <div class="slide">New</div>
  <div class="slide">Map</div>
</div>

CSS:

.container {
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: slide 12s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33.33% {
    transform: translateX(-100%);
  }
  66.66% {
    transform: translateX(-200%);
  }
}