css3-無縫滾動左右滾動，且可以暫停

本文轉載自查看原文 2019-01-24 11:42 1507 常用特效/ Html5+CSS3

@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

動畫的名稱和運行所需時間是必須的

幀動畫：將動畫名稱賦給選擇器后動畫運行完就會返回初始值，所以需要通過給選擇器添加類保證動畫的正常運行

下圖是一個簡潔的無縫滾動（css3）

划過停止運動：animation-play-state:paused

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            .wrap{width: 500px;height:100px;overflow:hidden;margin: 100px auto;position: relative;border: 10px solid #999;}
            .list{position: absolute;left:0;top:0;width: 1000px;height: 300px;}
            .list:hover{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-ms-animation-play-state: paused;animation-play-state: paused;}
            .list li{float:left;width: 98px;height: 98px;border: 1px solid #000;text-align: center;line-height: 98px;}
            @-webkit-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @-moz-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @-ms-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            .scroll{-webkit-animation: 3s move infinite ;-moz-animation: 3s move infinite;-ms-animation: 3s move infinite;animation: 3s move infinite;left: -500px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("list");
                oUl.className='list scroll';
            }
        </script>
    </head>
    <body>
        <div class="wrap">
            <ul class="list" id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>

免責聲明！

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

猜您在找 【javascript】無縫滾動——左右純css3實現無縫左右滾動的公告。。。移動端文字的無縫上下、左右滾動 Js上下左右無縫隙滾動代碼 Js上下左右無縫隙滾動代碼文字無縫滾動效果，鼠標移入時暫停 css3 文字橫向無縫滾動 css3實現無縫滾動效果 CSS3+HTML5特效3 - 縱向無縫滾動 CSS3+HTML5特效4 - 橫向無縫滾動