纯css和3d的渐变动画

最新推荐文章于 2023-08-08 19:46:46 发布

pandaHe_Status

最新推荐文章于 2023-08-08 19:46:46 发布

阅读量142

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43321726/article/details/118689621

版权

前端专栏收录该内容

101 篇文章 2 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        
        body,
        html {
            box-sizing: border-box;
        }
        
        body {
            /* background-image: linear-gradient(to right, rgb(40, 65, 74), rgb(120, 144, 120), blue); */
            background-image: linear-gradient(135deg, hsl(170deg, 80%, 70%), hsl(190deg, 80%, 70%), hsl(250deg, 80%, 70%), hsl(320deg, 80%, 70%));
            background-size: 200% 200%;
            animation: gradient-move 1s linear infinite;
        }
        
        main {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        
        .cube {
            width: 250px;
            height: 250px;
            transform-style: preserve-3d;
            animation: rotate-cube 10s ease-in-out infinite;
        }
        
        .cube>div {
            width: 250px;
            height: 250px;
            position: absolute;
            background-size: cover;
            background-position: center center;
            opacity: 0.7;
            box-shadow: inset 2px 2px 3px 2px rgba(49, 102, 105, 0.2);
        }
        /* 前 */
        
        .cube .img1 {
            background-image: url('/1.jpeg');
            transform: translateZ(125px);
        }
        /* 左 */
        
        .cube .img2 {
            background-image: url('/2.jpeg');
            transform: rotateX(-90deg) translateZ(125px);
        }
        /* 右 */
        
        .cube .img3 {
            background-image: url('/3.jpeg');
            transform: rotateX(90deg) translateZ(125px);
        }
        /* 上 */
        
        .cube .img4 {
            background-image: url('/4.jpeg');
            transform: rotateY(-90deg) translateZ(125px);
        }
        /* 下 */
        
        .cube .img5 {
            background-image: url('/1.jpeg');
            transform: rotateY(90deg) translateZ(125px);
        }
        /* 后 */
        
        .cube .img6 {
            background-image: url('/2.jpeg');
            transform: rotateX(180deg) translateZ(125px);
        }
        
        @keyframes rotate-cube {
            0% {
                transform: rotateX(0deg) rotateY(125deg);
            }
            20% {
                /* 右 */
                transform: rotateY(90deg);
            }
            40% {
                /* 上 */
                transform: rotateX(90deg);
            }
            60% {
                /* 左 */
                transform: rotateY(-90deg);
            }
            80% {
                /* 下 */
                transform: rotateX(-90deg);
            }
            100% {
                transform: rotateX(0deg) rotateY(0deg);
            }
        }
        
        @keyframes gradient-move {
            0% {
                background-position: 0% 0%;
            }
            100% {
                background-position: 100% 100%;
            }
        }
    </style>
</head>

<body>
    <main>
        <div class="cube">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
            <div class="img4"></div>
            <div class="img5"></div>
            <div class="img6"></div>
        </div>
    </main>
</body>

</html>

在这里插入图片描述