当先锋百科网

首页 1 2 3 4 5 6 7

【CSS3】原生CSS3教你实现轮播图

css3实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        background: #2c3e50;
        display: grid;
    }
    main{
        width: 400px;
        height: 200px;
        align-self: center;
        justify-self: center;
        overflow: hidden;
    }
    section{
        width: 1600px;
        height: 200px;
        display: grid;
        grid-template: 1fr/repeat(4,400px);
        animation-name:slide;
        animation-duration: 4s;
        animation-timing-function: steps(4,end);
        animation-iteration-count: infinite;
    }
    section:hover{
        animation-play-state: paused;
    }
    div{
        width: 100%;
    }
    img{
        width: 100%;
    }
    @keyframes slide {
        to{
            transform: translateX(-1600px);
        }
    }
    ul{
        position: absolute;
        width: 120px;
        left: 50%;
        bottom: 40%;
        transform: translateX(-50%);
        display: grid;
        grid-template: 1fr/repeat(4,1fr);
        list-style: none;
    }
    li{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(0,0,0,.3);
        display: grid;
        justify-items: center;
        align-items: center;
        color: white;
    }
    div>img{
        border-radius: 20px;
    }
</style>
<body>
<main>
    <section>
        <div><img src="../../img/03.jpg" alt=""></div>
        <div><img src="../../img/05.jpg" alt=""></div>
        <div><img src="../../img/06.jpg" alt=""></div>
        <div><img src="../../img/04.jpg" alt=""></div>
    </section>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</main>
</body>
</html>