纯CSS实现图片轮播

利用CSS3的新特性,实现了图片切换播放(无定时器的图片轮播),原理很简单,代码清晰可读。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片切换播放(选项卡同理)</title>
    <style>
        body{
            font-family: "微软雅黑";
        }
        @keyframes init {
            0% {
                left: -100%
            }
            100% {
                left: 0%;
            }
        }
        @keyframes out {
            0% {
                left: 0%;
            }
            100% {
                left: -100%;
            }
        }
        @keyframes in {
            0% {
                left: 100%;
            }
            100% {
                left: 0%;
            }
        }
        .banner {
            width: 250px;
            height: 150px;
            position: relative;
            overflow: hidden;
            background-color: red;
        }
        .banner ul {
            margin: 0;
            padding: 0;
        }
        .banner li {
            display: block;
        }
        .sliders {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right:0;
            animation: 0.5s init ease;
        }
        .sliders li {
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            animation: 0.5s out ease;
        }
        #slider_1 {
            background-color: red;
        }
        #slider_2 {
            background-color: green;
        }
        #slider_3 {
            background-color: blue;
        }
        .sliders li:target {
            left: 0%;
            animation: 0.5s in ease;
        }
        .btn{
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
        }
        .btn 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="btn">
        <a href="#slider_1">1</a>
        <a href="#slider_2">2</a>
        <a href="#slider_3">3</a>
    </div>
</div>
</body>
</html>
Comments
Write a Comment