基於CSS3實現水平輪播

效果圖

在這裏插入圖片描述

方法:使用動畫實現功能;鼠標懸停可以實現暫停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        /* 幻燈片背景 */
        .content{
            background: #A1634C; margin: 100px auto;
            animation: bj 10s linear infinite;                  
        }
        /* 幻燈片盒子,顯示 */
        .box{
            width: 800px; height: 300px; margin: 0 auto;
            overflow: hidden; position: relative;
        }
        /* 整體幻燈片 */
        .box .slide{
            width: 400%; height: 100%; 
            position: absolute; top: 0; left: 0;
            animation: slide 10s linear infinite;
        }
        /* 鼠標懸停幻燈片停止 */
        .content:hover, .content:hover .slide{
            animation-play-state: paused;
        }
        /* 轉換a標籤,佈局浮動 */
        .box .slide a{
            display: block; width: 25%; height: 100%; float: left;
        }
        /* 設置圖片大小 */
        .box .slide img{
            width: 100%; height: 100%;
        }

        /* 幻燈片動畫 */
        @keyframes slide {
            0%{left: 0%;}
            30%{left: 0%;}
            33%{left: -100%;}
            64%{left: -100%;}
            67%{left: -200%;}
            95%{left: -200%;}
            100%{left: -300%;}
            /* 100%{left: -400%;} 這樣寫錯誤,導致超出幻燈片顯示後面空白 */
        }
        /* 背景顏色:#A1634C #D0D4DA #86572B*/
        /* 顏色動畫:要比幻燈片快一點點 */
        @keyframes bj {
            0%{background: #A1634C;}
            29%{background: #A1634C;}
            33%{background: #D0D4DA;}
            63%{background: #D0D4DA;}
            67%{background: #86572B;}
            94%{background: #86572B;}
            97%{background: #A1634C;}
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">
            <div class="slide">
                <a href="#"><img src="../img/img0.jpg"></a>
                <a href="#"><img src="../img/img1.jpg"></a>
                <a href="#"><img src="../img/img6.jpg"></a>
                <!-- 末尾重複第一張圖片,顯得連貫性 -->
                <a href="#"><img src="../img/img0.jpg"></a>
            </div>
        </div>
    </div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章