JavaScript（三十）立体轮播图demo

最新推荐文章于 2023-12-07 15:29:02 发布

原创

最新推荐文章于 2023-12-07 15:29:02 发布 · 504 阅读

2 ·

CC 4.0 BY-SA版权

立体轮播图效果展示

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            position: relative;
            width: 900px;
            height: 370px;
            margin: 0 auto;
            overflow: hidden;
        }

        .imagePar > div {
            position: absolute;
            width: 400px;
            height: 200px;
            transition: all 0.5s linear;
        }

        .imagePar > div:nth-child(1) {
            top: 150px;
            left: 250px;
            z-index: 6;
        }

        .imagePar > div:nth-child(2) {
            top: 100px;
            left: 0;
            z-index: 5;
        }

        .imagePar > div:nth-child(3) {
            top: 50px;
            left: 0;
            z-index: 4;
        }

        .imagePar > div:nth-child(4) {
            top: 0;
            left: 250px;
            z-index: 3;
        }

        .imagePar > div:nth-child(5) {
            top: 50px;
            left: 500px;
            z-index: 4;
        }

        .imagePar > div:nth-child(6) {
            top: 100px;
            left: 500px;
            z-index: 5;
        }

        .imagePar > div > img {
            width: 400px;
            height: 200px;
        }
        .imagePar{
            position: relative;
            width: 900px;
            height: 350px;
        }
        .btn{
            width: 900px;
            height: 40px;
            position: absolute;
            top: 155px;
            z-index: 10;

        }
        .btn>span:nth-child(1){
            width: 30px;