CSS3动画完成两种轮播图

最新推荐文章于 2022-10-31 22:07:38 发布

Max hui

最新推荐文章于 2022-10-31 22:07:38 发布

阅读量159

点赞数

文章标签： animation css3 css html

本文链接：https://blog.csdn.net/SUZEHUI9636/article/details/116375887

版权

素材链接： https://pan.baidu.com/s/1Zdz3p9mRp-Q2e6tbjAaawg

提取码： ua78

第一种

效果：

源代码：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>



<body>

    <div class="main">

        <div class="pic">

            <img src="img13/1.jpg" />

            <img src="img13/2.jpg" />

            <img src="img13/3.jpg" />

            <img src="img13/4.jpg" />

        </div>



        <ul>

            <li class="f"></li>

            <li class="s"></li>

            <li class="t"></li>

            <li class="fo"></li>

        </ul>



    </div>

</body>



</html>

<style>

    .main {

        width: 300px;

        /* border: 1px solid red; */

        overflow: hidden;

        position: relative;

    }

    

    .pic {

        width: 1200px;

        font-size: 0;

        animation: lb 16s infinite;

    }

    

    .pic img {

        width: 300px;

    }

    

    ul {

        width: 120px;

        height: 16px;

        position: absolute;

        bottom: 10px;

        text-align: center;

        left: 50px;

    }

    

    li {

        list-style: none;

        float: left;

        width: 16px;

        height: 16px;

        border-radius: 50%;

        background-color: white;

        margin: 6px;

    }

    

    .f {

        animation: f 16s linear infinite;

        animation-delay: 0s;

    }

    

    .s {

        animation: s 16s linear infinite;

        animation-delay: 2s;

    }

    

    .t {

        animation: t 16s linear infinite;

        animation-delay: 6s;

    }

    

    .fo {

        animation: fo 16s linear infinite;

        animation-delay: 10s;

    }

    

    @keyframes lb {

        0%,

        100% {

            transform: translate(0);

        }

        23% {

            transform: translate(-300px);

        }

        46% {

            transform: translate(-600px);

        }

        69% {

            transform: translate(-900px);

        }

        92% {

            transform: translate(0);

        }

    }

    

    @keyframes f {

        0%,

        100% {

            background-color: #777;

        }

        45% {

            background-color: white;

        }

        90% {

            background-color: white;

        }

        95% {

            background-color: #777;

        }

    }

    

    @keyframes s {

        0%,

        100% {

            background-color: #777;

        }

        45% {

            background-color: white;

        }

        90% {

            background-color: white;

        }

        95% {

            background-color: #777;

        }

    }

    

    @keyframes t {

        0%,

        100% {

            background-color: #777;

        }

        45% {

            background-color: white;

        }

        90% {

            background-color: white;

        }

        95% {

            background-color: #777;

        }

    }

    

    @keyframes fo {

        0%,

        100% {

            background-color: #777;

        }

        45% {

            background-color: white;

        }

        90% {

            background-color: white;

        }

        95% {

            background-color: #777;

        }

    }

</style>

第二种

效果图：

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css轮播图2</title>
</head>

<body>
    <div class="main">
        <ul class="c1">
            <li class="c1_1 1">

                <img src="img13/1.jpg" alt="">

            </li>
            <li class="c1_1 2">

                <img src="img13/2.jpg" alt="">

            </li>
            <li class="c1_1 3">

                <img src="img13/3.jpg" alt="">

            </li>
            <li class="c1_1 4">

                <img src="img13/4.jpg" alt="">

            </li>
        </ul>
        <div class="c2">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot active"></span>
        </div>
    </div>
</body>

</html>
<style>
    body {
        margin: 0;
        background: #dfe;
    }
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .main {
        position: relative;
        width: 600px;
        height: 300px;
        margin: 100px auto;
        overflow: hidden;
        /* border: solid blue 1px; */
    }
    
    .c1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 2400px;
        height: 100%;
        overflow: hidden;
        animation: img 10s steps(1, end) infinite;
        transition: left 1s linear;
    }
    
    .c1_1 {
        width: 600px;
        height: 100%;
        float: left;
        overflow: hidden;
    }
    
    .c1_1 img {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    /* 分页 */
    
    .c2 {
        /* border: 1px red solid; */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 45px;
        background: rgba(255, 255, 255, 0.3);
        text-align: center;
    }
    
    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0px 5px;
        background: #fff;
        border-radius: 50%;
    }
    /* 橙色小圆点 */
    
    .dot.active {
        position: absolute;
        left: 256px;
        top: 18px;
        width: 11px;
        height: 11px;
        margin: 0;
        background: tomato;
        animation: dot 10s steps(1, end) infinite;
        transition: left 1s linear;
    }
    
    @keyframes img {
        0%,
        100% {
            left: 0;
        }
        25% {
            left: -600px;
        }
        50% {
            left: -1200px;
        }
        75% {
            left: -1800px;
        }
    }
    
    @keyframes dot {
        0%,
        100% {
            left: 257px;
        }
        25% {
            left: 281px;
        }
        50% {
            left: 306px;
        }
        75% {
            left: 331px;
        }
    }
</style>