css3动画魔方无限滚动

谁践踏了优雅 2023-02-20 10:50 29阅读 0赞

### css3动画 魔方 无限滚动 ###

![在这里插入图片描述][20200626115807668.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            *,
            ul,
            li { 
                margin: 0;
                padding: 0;
            }
            
            li { 
                margin: 0;
            }
            
            .box { 
                width: 300px;
                height: 300px;
                position: relative;
                /* 开启3d */
                transform-style: preserve-3d;
                margin: 200px auto;
                animation: dong 10s;
                /* infinite 无限循环 */
                animation-iteration-count: infinite;
                /* linear 匀速 */
                animation-timing-function: linear;
            }
            
            li { 
                list-style: none;
                display: inline-block;
                width: 90px;
                height: 90px;
                border-radius: 20px;
                text-align: center;
                line-height: 90px;
                background-color: #ccc;
                font-size: 40px;
                font-weight: 700;
                margin: 5px 2px;
            }
            
            ul { 
                width: 300px;
                height: 300px;
                padding-left: 5px;
                position: absolute;
            }
            
            .qian li { 
                background: red;
            }
            
            .qian { 
                transform: translateZ(150px);
                /* 向眼睛 位移150px */
            }
            
            .hou li { 
                background: blue;
            }
            
            .hou { 
                transform: translateZ(-150px);
                /* 向眼睛 位移-150px */
            }
            
            .zuo li { 
                background: deepskyblue;
            }
            
            .zuo { 
                transform: translateX(-150px) rotateY(90deg);
                /* 向左边位移150px 沿着y轴转90度 */
            }
            
            .you li { 
                background: pink;
            }
            
            .you { 
                transform: translateX(150px) rotateY(-90deg);
                /* 向右边位移150px 沿着y轴转90度 */
            }
            
            .shang li { 
                background: yellow;
            }
            
            .shang { 
                transform: translateY(-150px) rotateX(90deg);
            }
            
            .xia li { 
                background: orange;
            }
            
            .xia { 
                transform: translateY(150px) rotateX(-90deg);
            }
            
            .box { 
                transform: rotateY(45deg) rotateX(45deg);
            }
            
            @keyframes dong { 
                0% { 
                    transform: rotateX(0deg) rotateY(120deg);
                }
                10% { 
                    transform: rotateX(30deg) rotateY(30deg);
                }
                20% { 
                    transform: rotateX(60deg) rotateY(90deg);
                }
                30% { 
                    transform: rotateX(90deg) rotateY(10deg);
                }
                40% { 
                    transform: rotateX(120deg) rotateY(150deg);
                }
                60% { 
                    transform: rotateX(130deg) rotateY(200deg);
                }
                70% { 
                    transform: rotateX(180deg) rotateY(260deg);
                }
                80% { 
                    transform: rotateX(190deg) rotateY(160deg);
                }
                90% { 
                    transform: rotateX(140deg) rotateY(90deg);
                }
                100% { 
                    transform: rotateX(120deg) rotateY(120deg);
                }
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <ul class="qian">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul class="hou">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul class="zuo">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul class="you">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul class="shang">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul class="xia">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
    </body>
    
    </html>

[20200626115807668.gif_pic_center]: https://img-blog.csdnimg.cn/20200626115807668.gif#pic_center