91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用css怎么實現一個幻燈片效果

發布時間:2021-04-15 18:11:13 來源:億速云 閱讀:205 作者:Leah 欄目:web開發

本篇文章給大家分享的是有關使用css怎么實現一個幻燈片效果,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

實現方法:首先定義多張幻燈片元素;然后使用“@keyframes”規則和animation屬性定義動畫;接著在動畫中根據幻燈片數量定義關鍵幀;最后在關鍵幀中使用“transform:translateX()”樣式實現切換效果。

通過transfrom屬性進行2D轉換

html代碼:

<section id=box>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>1</li>
  </ul>
</section>

css代碼:

<style>
    * {
      margin: 0;
      padding: 0;
      font-family: 微軟雅黑;
      list-style: none;
    }
    #box{
        width:400px;
        height:200px;
        border: 1px solid #000;
        margin: 50px auto;
        overflow: hidden;
    }
    ul{
      width: 2000px;
      animation: dh 10s infinite ease;
    }
    ul li{
      width:400px;
      height:200px;
      float: left;
    }
    ul li:nth-child(1){
      background:#4b86db;
    }
    ul li:nth-child(2){
      background:#ff9999;
    }
    ul li:nth-child(3){
      background:olivedrab;
    }
    ul li:nth-child(4){
      background:skyblue;
    }
    ul li:nth-child(5){
      background:#4b86db;
    }
 
@keyframes dh {
      0%{transform: translateX(0)}
      25%{transform: translateX(-400px)}
      50%{transform: translateX(-800px)}
      75%{transform: translateX(-1200px)}
      100%{transform: translateX(-1600px)}
}
  </style>

以上就是使用css怎么實現一個幻燈片效果,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

香港| 宿州市| 乐安县| 林周县| 渝北区| 青川县| 通渭县| 雅江县| 麦盖提县| 临邑县| 乌兰浩特市| 太仓市| 胶南市| 广州市| 普格县| 视频| 乌兰浩特市| 特克斯县| 华阴市| 九江市| 渭源县| 台江县| 丹棱县| 富川| 察隅县| 盐池县| 邛崃市| 旬邑县| 城步| 同仁县| 罗甸县| 信宜市| 泰州市| 永川市| 靖州| 津南区| 揭东县| 汕尾市| 镇巴县| 岳阳市| 麦盖提县|