盒子自定义动画

最新推荐文章于 2024-06-07 16:01:04 发布

原创最新推荐文章于 2024-06-07 16:01:04 发布 · 319 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: black;
        }

        .block {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 200px;
            transform-style: preserve-3d;
            animation: blockanimate 10s linear infinite;
        }

        @keyframes blockanimate {
            from {
                transform: rotatex(0deg) rotatey(0deg);
            }
            to {
                transform: rotatex(360deg) rotatey(360deg);
            }
        }

        .block1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:lightgoldenrodyellow;
            background-size: 300px 300px;
            transform: rotatey(0deg);
        }

        .block2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:#bce8f1;
            background-size: 300px 300px;
            transform: rotatey(0deg) translatez(-300px);
        }

        .block3 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:peachpuff;
            background-size: 300px 300px;
            transform: rotatey(90deg) translatez(-150px) translatex(150px);
        }

        .block4 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:#FD7364;
            background-size: 300px 300px;
            border: 1px solid white;
            transform: rotatey(90deg) translatez(150px) translatex(150px);
        }

        .block5 {
            background-size: 300px 300px;
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:peru;
            transform: rotatex(90deg) translatey(-150px) translatez(-150px);
        }

        .block6 {
            background-size: 300px 300px;
            position: absolute;
            width: 300px;
            height: 300px;
            background-color:thistle;
            transform: rotatex(90deg) translatey(-150px) translatez(150px);
        }
    </style>
</head>
<body>
<div class="block">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="block3"></div>
    <div class="block4"></div>
    <div class="block5"></div>
    <div class="block6"></div>
</div>
</body>
</html>

莫道君行早更有早行人！