css样式 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        /* 设置背景颜色 */
        body{
            background-color: blue;
        }
        .a{
            /* 相对定位 */
            position: relative;
            /* 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 */
            perspective: 1600px;
            top:600px;
            /* 扩展和收缩 flex 容器内的元素 */
            display: flex;
            /* 居中排列 */
            justify-content: center;
            /* 居中对齐弹性盒的各项 <div> 元素 */
            align-items: center;
        }
        .b{
            width: 400px;
            height: 250px;
            position: absolute;
            /* 所有子元素在3D空间呈现 */
            transform-style: preserve-3d;
            animation: a 20s infinite cubic-bezier(.7,0,.17,1);
        }
        .b div{
            position: absolute;
            /* 背景像素覆盖 */
            background-size: cover;
            /* 不透明度 */
            opacity: .9;
            width: 400px;
            height: 250px;
            transform: rotateY(calc(var(--i)*120deg)) translateZ(500px);
            
        }
        .c{
            background-image: url("img/1.webp");
        }
        .d{
            background-image: url("img/2.webp");
        }
        .e{
            background-image: url("img/3.webp");
        }
        @keyframes a{
            0%{
                transform:translateZ(-100px) rotateY(0)
            }
            33%{
                transform:translateZ(-100px) rotateY(-120deg)
            }
            66%{
                transform:translateZ(-100px) rotateY(-240deg)
            }
            100%{
                transform:translateZ(-100px) rotateY(-360deg)
            }
        }
    </style>
    <body>
        <!-- 快速创建父子div div.a>div.b -->
        <div class="a">
            <div class="b">
                <!-- ctrl+alt+鼠标左键 编辑多行 -->
                <div class="c" style="--i:0"></div>
                <div class="d" style="--i:1"></div>
                <div class="e" style="--i:2"></div>
            </div>
        </div>
    </body>
</html>

 

posted @ 2022-10-30 13:58  花心大萝卜li  阅读(22)  评论(0)    收藏  举报