点击按钮图片从右向左划入

最新推荐文章于 2021-09-28 17:23:25 发布

weixin_30656145

最新推荐文章于 2021-09-28 17:23:25 发布

阅读量178

点赞数

原文链接：http://www.cnblogs.com/alalashizi/p/6119294.html

版权

并不懂代码是怎么实现的，可它就是实现了，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .banner {
        width: 300px;
        height: 200px;
        position: relative;
        overflow: hidden;
        background: url("1.jpg");   //图片1,2,3为宽度300，高度200的任意图片
    }

    .banner ul {
        margin: 0;
        padding: 0;
    }

    .banner li {
        display: block;
    }

    .sliders {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        animation: .5s slider-init linear;
    }

    .sliders li {
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        animation: .5s slider-out linear;
    }

    #slider-1 {
        background: url("1.jpg");
    }

    #slider-2 {
        background: url("2.jpg");
    }

    #slider-3 {
        background: url("3.jpg");
    }

    .sliders li:target {
        left: 0%;
        animation: .5s slider-in linear;
    }

    @keyframes slider-init {
        0% {
            left: -100%
        }
        100% {
            left: 0%;
        }
    }

    @keyframes slider-out {
        0% {
            left: 0%;
        }
        100% {
            left: -100%;
        }
    }

    @keyframes slider-in {
        0% {
            left: 100%;
        }
        100% {
            left: 0%;
        }
    }

    .btns {
        z-index: 100;
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
    }

    .btns a {
        display: block;
        margin: 0 1px;
        background-color: rgba(255, 255, 255, 0.5);
        color: white;
        text-decoration: none;
        padding: 10px 14px;
    }
    </style>
</head>

<body>
    <div class="banner">
        <ul class="sliders"> //轮播的三个图片
            <li id="slider-1"></li>
            <li id="slider-2"></li>
            <li id="slider-3"></li>
        </ul>
        <div class="btns">
            <a href="#slider-1">1</a>
            <a href="#slider-2">2</a>
            <a href="#slider-3">3</a>
        </div>
    </div>
</body>

</html>