HTML中图片连续滚动 

<!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标签中最后两个图片必须和第一，二相同，从而做到动画无缝衔接

posted @ 2020-04-29 00:30  陈小歪、  阅读(8297)  评论(0)  编辑  收藏  举报