css3实现轮播图

最新推荐文章于 2022-10-14 11:19:02 发布

weixin_30634661

最新推荐文章于 2022-10-14 11:19:02 发布

阅读量51

点赞数

原文链接：http://www.cnblogs.com/intangible/p/6611207.html

版权

css3动画属性简写：

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

　　参数：name：需要绑定到选择器的 keyframe 名称;

　　　　duration：动画完成时间

　　　　timing-function：动画速度曲线

　　　　delay：动画开始前延迟

　　　　iteration-count：动画播放次数

　　　　direction：是否轮流反向播放动画

　　　　fill-mode：动画在播放之前或之后，其动画效果是否可见

　　　　play-state：动画是否正在运行或暂停，不能简写

<!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>