送女朋友-css动画制作立方体相册

2024-02-21 23:18:40
直接上代码！

嵌套立方体相册


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
        }
        
        li {
            list-style: none;
        }
        
        .list {
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            position: absolute;
            margin-top: -100px;
            margin-left: -100px;
            transform-style: preserve-3d;
            /* transition: all 2s; */
            animation: move 2s linear infinite;
            transform: rotateX(20deg);
        }
        
        .list-big {
            width: 600px;
            height: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
            transform-style: preserve-3d;
            /* transition: all 2s; */
            animation: move 6s linear infinite;
            transform: rotateX(20deg);
            background-size: 600px;
        }
        
        .item {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            background-size: 200px;
            /* opacity: 0.8; */
        }
        
        .item:nth-child(1) {
            background: url("./img/hl1.jpg");
            transform: translateZ(100px);
        }
        
        .item:nth-child(2) {
            background: url("img/hl2.jpg");
            transform: translateZ(100px) rotateY(180deg);
        }
        
        .item:nth-child(3) {
            background: url("./img/hl3.jpg");
            transform: translateX(-100px) rotateY(-90deg);
        }
        
        .item:nth-child(4) {
            background: url("./img/hl4.jpg");
            transform: translateX(100px) rotateY(90deg);
        }
        
        .item:nth-child(5) {
            background: url("./img/hl5.jpg");
            transform: translateY(-100px) rotateX(90deg);
        }
        
        .item:nth-child(6) {
            background: url("./img/hl6.jpg");
            transform: translateY(100px) rotateX(-90deg);
        }
        /* } .item:nth-child(1) {
            background-image: url("./img/hl1.jpg") no-repeat;
        } */
        /*         
        .list:hover {
            transform: rotateX(20deg) rotateY(36000deg);
        } */
        
        @keyframes move {
            100% {
                transform: rotateX(20deg) rotateY(360deg);
            }
        }
        
        @keyframes turn {
            to {
                transform: translateZ(600px);
            }
        }
        
        @keyframes turn1 {
            to {
                transform: translateZ(-600px) rotateY(180deg);
            }
        }
        
        @keyframes turn2 {
            to {
                transform: translateX(-600px) rotateY(-90deg);
            }
        }
        
        @keyframes turn3 {
            to {
                transform: translateX(600px) rotateY(90deg);
            }
        }
        
        @keyframes turn4 {
            to {
                transform: translateY(-600px) rotateX(90deg);
            }
        }
        
        @keyframes turn5 {
            to {
                transform: translateY(600px) rotateX(-90deg);
            }
        }
        
        .item-big {
            width: 600px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .8;
        }
        
        .item-big:nth-child(1) {
            animation: turn 2s linear infinite;
            background: url("./img/2.jpg");
            transform: translateZ(300px);
        }
        
        .item-big:nth-child(2) {
            animation: turn1 2s linear infinite;
            background: url("img/3.jpg");
            transform: translateZ(-300px) rotateY(180deg);
        }
        
        .item-big:nth-child(3) {
            animation: turn2 2s linear infinite;
            background: url("./img/4.jpg");
            transform: translateX(-300px) rotateY(-90deg);
        }
        
        .item-big:nth-child(4) {
            animation: turn3 2s linear infinite;
            background: url("./img/5.jpg");
            transform: translateX(300px) rotateY(90deg);
        }
        
        .item-big:nth-child(5) {
            animation: turn4 2s linear infinite;
            background: url("./img/6.jpg");
            transform: translateY(-300px) rotateX(90deg);
        }
        
        .item-big:nth-child(6) {
            animation: turn5 2s linear infinite;
            background: url("./img/7.jpg");
            transform: translateY(300px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
    <ul class="list-big">
        <li class="item-big"></li>
        <li class="item-big"></li>
        <li class="item-big"></li>
        <li class="item-big"></li>
        <li class="item-big"></li>
        <li class="item-big"></li>
    </ul>
</body>

</html>
码农公寓

直接上代码！

相关文章
