首页 > 代码库 > 点击按钮图片从右向左划入

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

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

<!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="http://www.mamicode.com/#slider-1">1</a>
            <a href="http://www.mamicode.com/#slider-2">2</a>
            <a href="http://www.mamicode.com/#slider-3">3</a>
        </div>
    </div>
</body>

</html>

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