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

LeeTikPaak19

已于 2023-03-15 14:36:48 修改

阅读量406

点赞数

分类专栏：前端文章标签： CSS3 轮播图

于 2019-10-14 14:27:33 首次发布

本文链接：https://blog.csdn.net/weixin_43521227/article/details/102547293

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

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>

LeeTikPaak19

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【CSS3】原生CSS3教你实现轮播图

css3实现轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ padding: 0; ...
复制链接

扫一扫