zoukankan      html  css  js  c++  java
  • css写无缝滚动

    html结构:

    <div class="authority">
                        <ul>
                            <li>
                                <img src="./images/replace/zizhi01.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/replace/zizhi02.png" alt="">
                            </li>
                            <li>
                                <img src="./images/replace/zizhi03.jpg" alt="">
                            </li>
                            <li class="quanwei">
                                <div>
                                    <img src="./images/replace/zizhi04.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/replace/zizhi04.jpg" alt="">
                                </div>
                            </li>
                            <li>
                                <img src="./images/replace/zizhi01.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/replace/zizhi02.png" alt="">
                            </li>
                            <li>
                                <img src="./images/replace/zizhi03.jpg" alt="">
                            </li>
                            <li class="quanwei">
                                <div>
                                    <img src="./images/replace/zizhi04.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/replace/zizhi04.jpg" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
    

      

      css

     .authority{
         100%;
        overflow: hidden;
    }
    .authority ul{
         2560px;
      animation: gun 10s linear infinite;
    }
    .authority ul:hover{
        animation-play-state: paused;
    }
    .authority ul>li{
        float: left;
        height: 448px;
        background-size: cover;
    }
    .authority ul>li img{
         320px;
    }
    

      

    css动画:

    @keyframes gun{
        from{
            transform: translateX(0px);
        }
        to{
            transform: translateX(-1280px );
        }
    }
    

      

  • 相关阅读:
    晕晕的一天
    23. 合并K个排序链表
    25. K 个一组翻转链表
    328. 奇偶链表
    86. 分隔链表
    290. 单词规律
    202. 快乐数
    242. 有效的字母异位词
    16.最接近的三数之和
    (转) java 简单工厂模式(实现一个计算器)
  • 原文地址:https://www.cnblogs.com/webSong/p/8391844.html
Copyright © 2011-2022 走看看