文章目录

• 一、步数
• 二、轮播屏
• • 1.透明度方法
  • 2.lable方法
  • 3.真正的轮播效果

---

一、步数

.box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 200px;
            background: url(img/天宫.jpg) no-repeat;
            animation: identifier 1s steps(7) infinite;
        }
        
        @keyframes identifier {
            to {
                background-position: -1862px 0px;
            }
        }

二、轮播屏

1.透明度方法

.box .slide {
            position: absolute;
            left: 0;
            top: 0;
            animation: slide 10s infinite;
            opacity: 0;
        }
        
        @keyframes slide {
            20% {
                opacity: 1;
            }
            40% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }
        
        .slide:nth-child(2) {
            animation-delay: 2s;
        }
        
        .slide:nth-child(3) {
            animation-delay: 4s;
        }
        
        .slide:nth-child(4) {
            animation-delay: 6s;
        }
        
        .slide:nth-child(5) {
            animation-delay: 8s;
        }

2.lable方法

<div class="container clearfix">
        <input type="text" name="show" id="show1">
        <input type="text" name="show" id="show2">
        <div class="box">
            <div class="slides-show show1"></div>
            <div class="slides-show show2"></div>
        </div>
        <div class="circle-group">
            <label class="circle" for="show1"></label>
            <label class="circle" for="show2"></label>
</div>

.container {
            width: 640px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            /* background-color: pink; */
            overflow: hidden;
        }
        
        .box {
            width: 3200px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            transition: transform 2s;
        }
        /* .clearfix::after {
            clear: both;
            content: "";
            display: block;
        } */
        
        input {
            opacity: 0;
        }
        
        input[name='show'] {
            width: 0;
            height: 0;
            opacity: 0;
            position: absolute;
        }
        
        .slides-show {
            width: 640px;
            height: 400px;
            background-size: cover;
            background-repeat: no-repeat;
            float: left;
        }
        .slides-show:nth-of-type(1) {
            background-image: url("img/ss1.jpg");
        }
        
        .slides-show:nth-of-type(2) {
            background-image: url("img/ss2.jpg");
        }
        .circle-group {
            width: 160px;
            height: 40px;
            position: absolute;
            margin-left: 240px;
            bottom: 10px;
        }
        .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            圆点悬浮效果，背景色改变
            background-color: #666;
            border: 2px solid #bdc3c7;
            transition: .5s;
        }
        .circle:hover {
            background-color: #bdc3c7;
        }
        圆点与图片切换链接上
        #show1:focus~.box {
            transform: translateX(0);
        }
        #show2:focus~.box {
            transform: translateX(-640px);
        }

3.真正的轮播效果

五张图片事例

.home-left .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 550px;
    height: 242px;
    animation: slideShow 10s linear infinite;
}

@keyframes slideShow {
    0% {
        transform: translateX(550px);
    }
    5% {
        transform: translateX(0px);
    }
    20% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-550px);
    }
    100% {
        transform: translateX(-550px);
    }
}

.home-left .item:nth-child(2) {
    animation-delay: -2s;
}

.home-left .item:nth-child(3) {
    animation-delay: -4s;
}

.home-left .item:nth-child(4) {
    animation-delay: -6s;
}

.home-left .item:nth-child(5) {
    animation-delay: -8s;
}