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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击按钮图片从右向左划入相关的知识,希望对你有一定的参考价值。

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

<!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>

以上是关于点击按钮图片从右向左划入的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xamarin(iOS) 中将按钮从右向左移动

jQuery从右向左滑动

CSS3设置线条延伸动画,怎么从右向左延伸

如何让uilabel 上的字从右向左滚动显示

如何让uilabel 上的字从右向左滚动显示

如何让uilabel 上的字从右向左滚动显示