CSS 實例之滾動的圖片欄

番茄西紅柿發布于2019-04-23 13:21 / 2200人閱讀

摘要：設置大小，寬度為的兩倍，高度與相同，并指定動畫相關屬性定義動畫，主要是向左移動一組圖片的長度增加鼠標懸停，動畫暫停的效果最后給增加使得超出的部分隱藏，這樣整體一組滾動的圖片欄就做好了整體代碼如下

在一些網站上可以經常看到有一些圖片進行持續不斷的滾動，這個效果可以通過css的動畫效果來實現。具體效果如下

主要原理是通過動畫向左移動。

首先給出兩組一樣的圖片（同一行上），讓整體圖片向左移動一組圖片的長度，

這樣在動畫結束時會迅速還原到原來位置，而此時正好與第二組圖片交替，看起來就像是一組圖片在不斷循環向左滾動。

具體步驟如下：

1、設置主體代碼各處兩組一樣的圖片

 <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
        ul>
    nav>

2、設置nav的大小，寬度為一組圖片相加的寬度，高度為圖片的高度。

 
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

3、設置ul大小，寬度為nav的兩倍，高度與nav相同，并指定動畫相關屬性

ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }

4、定義動畫，主要是向左移動一組圖片的長度

 @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }

5、增加鼠標懸停，動畫暫停的效果

ul:hover {
            animation-play-state: paused;
        }

6、最后給nav 增加 overflow：hidden 使得超出的部分隱藏，這樣整體一組滾動的圖片欄就做好了

整體代碼如下

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }
        
        @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }
        
        img {
            width: 250px;
            height: 170px;
            float: left;
        }
        
        ul:hover {
            animation-play-state: paused;
        }
    style>
head>

<body>
    <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
        ul>
    nav>
body>

html>

View Code

云服務器 GPU云服務器 html圖片的滾動導航欄css代碼 css滾動條滾動條css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1768.html

css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0
vue 模仿今日頭條demo

vue 頭條 demo 寫在前面總結一下寫 demo 過程中遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網黃軼老師敲了一下餓了么商品購買頁的demoele效果預覽該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流數據接口直接打開今日...

simpleapples 2019-08-21 12:03 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
可視化效果(Visual effects)

摘要：一般地，一個塊盒的內容都被限制在該盒的邊內。這種盒并不一定會根據其祖先的屬性裁剪。默認情況下，元素不會被裁剪。在閉合路徑內的內容會顯示，而路徑外邊的都會被剪掉著作權歸作者所有。 Overflow and clipping 一般地，一個塊盒的內容都被限制在該盒的content邊內。某些情況下，一個盒可能會溢出，意味著它的部分內容或者全部內容位于該盒外部，例如：一行無法拆分，導致行盒比...

JowayYoung 2019-08-29 12:37 評論0 收藏0