css3實現輪播圖

時間 2019-11-09

標籤 css3 css 實現欄目 CSS 简体版

原文原文鏈接

css3動畫屬性簡寫：css

　　animation: name duration timing-function delay iteration-count direction fill-mode;html

　　參數：name：須要綁定到選擇器的 keyframe 名稱;css3

　　　　duration：動畫完成時間css3動畫

　　　　timing-function：動畫速度曲線動畫

　　　　delay：動畫開始前延遲spa

　　　　iteration-count：動畫播放次數code

　　　　direction：是否輪流反向播放動畫htm

　　　　fill-mode：動畫在播放以前或以後，其動畫效果是否可見blog

　　　　play-state：動畫是否正在運行或暫停，不能簡寫ip

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css3 實現輪播圖</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                width: 200px;
                height: 100px;
                position: relative;
                overflow: hidden;
            }            
            .pic{
                list-style: none;
                width: 800px;
                position: absolute;
                left: 0;
                animation-name: carousel;
                animation-duration: 2s;
                animation-iteration-count: infinite;
            }
            ul li{
                float: left;
            }
            img{
                width: 200px;
                height: 100px;
            }
            
            @keyframes carousel{
                0%,30%{
                    left: 0;
                }
                35%,65%{
                    left: -200px;
                }
                70%,99%{
                    left: -400px;
                }
                100%{
                    left: -600px;
                }
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul class="pic">
                <li><img src="1.jpg"/></li>
                <li><img src="2.jpg"/></li>
                <li><img src="3.jpg"/></li>
                <li><img src="1.jpg"/></li>
            </ul>
        </div>
    </body>
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。