08 - CSS3 - 无限轮播

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

< ! ---------- HTML ----------- >

<div class="father">
    <ul>
        <li>
            ![](素材/yx1.jpg)
        </li>
        <li>
            ![](素材/yx2.jpg)
        </li>
        <li>
            ![](素材/yx3.jpg)
        </li>
        <li>
            ![](素材/yx4.jpg)
        </li>
        <!--核心代码-->
        <li>
            ![](素材/yx1.jpg)
        </li>
        <li>
            ![](素材/yx2.jpg)
        </li>
    </ul>
</div>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 564px;
        height: 265px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
        background-color: #000;
    }
    ul{
        width:9999px;
        height: 265px;
        background-color: black;

        animation: sport 6s linear 0s infinite normal;
    }
    ul li{
        list-style: none;
        width: 464px;
        height: 265px;
        background-color: #000;
        float: left;
    }

    @keyframes sport {
        from{
            transform: translate(0, 0);
        }
        to{
            transform: translate(-1856px, 0);
        }
    }

    .father ul:hover{
        /*注意点: 动画添加给谁就让谁暂停*/
        animation-play-state: paused;
    }
    .father ul:hover li{
        opacity: 0.3;
    }
    .father ul li:hover{
        opacity: 1;
    }
</style>

< ! --------- 效果展示 ---------- >

**CSS3-无限轮播**