HTML中圖片連續滾動

本文轉載自查看原文 2020-04-29 00:30 5564

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            div{
                margin: 100px auto;
                width: 600px;
                height: 200px;
                border:1px solid black;
                overflow: hidden;
                
            }
            ul{
                width: 2000px;
                height: 200px;
                background: darkgray;
                animation:change 10s linear 0s infinite normal;   /*動畫元素，持續時間，速度，延遲時間，重復次數，是否往返*/
            }
            ul:hover{
                animation-play-state: paused;
            }
            ul:hover li{
                opacity: 0.5;   /*透明度，顯示父元素顏色*/
            }
            ul li:hover{
                opacity: 1;
            }
            ul li{
                width: 300px;height: 200px;
                list-style: none;
                float: left;
                border:1px solid black;
                background-color: brown;
                box-sizing: border-box;
                }
            @keyframes change{
                from{margin-left: 0;}
                to{margin-left:-1200px ;}
            }
            
            
        </style>
    </head>
    <body>
        <div><ul>
                    <li><img src=""/>1</li>
                    <li><img src=""/>2</li>
                    <li><img src=""/>3</li>
                    <li><img src=""/>4</li>
                    <li><img src=""/>1</li>
                    <li><img src=""/>2</li>
                </ul></div>
    </body>
</html>

注：img標簽中最后兩個圖片必須和第一，二相同，從而做到動畫無縫銜接

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何在HTML中實現圖片的滾動效果 JS實現圖片的不間斷連續滾動 html 圖片滾動代碼 html+css使圖片在頁面中循環滾動移動設備的HTML頁面中圖片實現滾動加載 HTML網頁圖片滾動代碼寫一個[圖片無縫向左連續滾動]究竟有多復雜 html中滾動小球的demo AdapterView 和 RecyclerView 的連續滾動 html中讓div不隨滾動條滾動