zoukankan      html  css  js  c++  java
  • css3实现轮播图

    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{
                     200px;
                    height: 100px;
                    position: relative;
                    overflow: hidden;
                }            
                .pic{
                    list-style: none;
                     800px;
                    position: absolute;
                    left: 0;
                    animation-name: carousel;
                    animation-duration: 2s;
                    animation-iteration-count: infinite;
                }
                ul li{
                    float: left;
                }
                img{
                     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>

     

  • 相关阅读:
    UITableView设置Cell左滑多个按钮(编辑,删除,置顶等)
    php处理ajax
    Vue实现增删改查功能
    Vue中slot内容分发
    两个Vue Demo
    js继承
    nodejs+express+mongodb搭建博客
    express中放置静态文件
    初始化一个Express项目
    mongodb使用1
  • 原文地址:https://www.cnblogs.com/intangible/p/6611207.html
Copyright © 2011-2022 走看看