css实现三维爱心立方体旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现三维爱心立方体旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --cube-size: 300px;
          --pink-cube-color: #f76488;
          --grey-cube-color: #e7e6e4;
          --core-cube-color: #7a7a7a;
          --heart-color: #feaec9;
          --piece-color: #999;
          --piece-light: #aaa;
        }
        
        body {
          margin: 13em 0;
          background: #2d2f31;
          overflow: hidden;
        }
        
        .container {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .companion-cube {
          width: var(--cube-size);
          height: var(--cube-size);
          position: relative;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          transform-style: preserve-3d;
          -webkit-animation: walkCube 6s linear infinite;
                  animation: walkCube 6s linear infinite;
        }
        
        .cube-face {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          background: #666d;
          box-shadow: 0 0 10px #0005 inset;
        }
        
        .cube-face .extracube {
            width: 100%;
            height: 100%;
            position: absolute;
            transform: translateZ(10px);
          }
        
        .cube-face .piece {
            --piece-size: 38%;
        
            z-index: 5;
            position: absolute;
          }
        
        .cube-face .piece.corner {
              width: var(--piece-size);
              height: var(--piece-size);
              top: 0;
              left: 0;
              background: radial-gradient(at 115% 115%, transparent 27%, var(--piece-light) 30% 39%, var(--piece-color) 40%);
              box-shadow:
                0 0 10px #4448 inset,
                14px 14px 20px #ddd inset;
            }
        
        .cube-face .piece.center {
              width: 15%;
              height: 15%;
              background-color: var(--piece-color);
              background-image: radial-gradient(ellipse 50% 200% at 90%, var(--piece-light) 30%, transparent 32%);
              top: 42%;
              left: 0;
              box-shadow:
                0 0 10px #4448 inset,
                14px 0 10px #ddd inset;
            }
        
        .cube-face .piece.corner.bottom {
              transform: scaleY(-1);
              top: auto;
              bottom: 0;
            }
        
        .cube-face .piece.center.bottom {
              transform: rotate(-90deg);
              top: auto;
              bottom: 0;
              left: 42.5%;
            }
        
        .cube-face .group {
            position: absolute;
          }
        
        .cube-face .group.left {
              width: 100%;
              height: 100%;
            }
        
        .cube-face .group.right {
              position: absolute;
              width: 100%;
              height: 100%;
              transform: rotate(180deg);
              z-index: 10;
            }
        
        /* 3D */
        
        .cube-face.front {
            z-index: 1;
          }
        
        .cube-face.top {
            transform-origin: 50% 100%;
            transform: translateY(calc(-1 * var(--cube-size))) rotateX(90deg);
          }
        
        .cube-face.right {
            transform-origin: 0% 50%;
            transform: translateX(var(--cube-size)) rotateY(90deg);
          }
        
        .cube-face.left {
            transform-origin: 100% 50%;
            transform: translateX(calc(-1 * var(--cube-size))) rotateY(-90deg);
          }
        
        .cube-face.bottom {
            transform-origin: 50% 0%;
            transform: translateY(var(--cube-size)) rotateX(-90deg);
          }
        
        .cube-face.back {
            transform: translateZ(calc(-1 * var(--cube-size))) rotateY(180deg);
          }
        
        .cube-face .circle {
            width: 40%;
            height: 40%;
            background: var(--grey-cube-color);
            background: radial-gradient(#fff, #cccc);
            border: 6px solid #b3b3b3;
            border-bottom: 0;
            border-right: 0;
            border-radius: 50%;
            position: relative;
            z-index: 5;
            display: grid;
            place-items: center;
          }
        
        .cube-face .circle .heart-container {
              width: 75%;
              height: 75%;
              display: flex;
              position: relative;
              justify-content: center;
              filter: drop-shadow(0 0 4px #fff);
            }
        
        .cube-face .circle .heart-container .base {
                width: 55%;
                height: 55%;
                background: var(--heart-color);
                position: absolute;
                bottom: 15%;
                transform: rotate(-45deg);
                border-radius: 5% 90% 100% 0% / 100% 90% 5% 0%;
              }
        
        .cube-face .circle .heart-container::before,
              .cube-face .circle .heart-container::after {
                content: "";
                width: 45%;
                height: 45%;
                border-radius: 50%;
                display: block;
                background: var(--heart-color);
                position: absolute;
                transform: translate(calc(50% * var(--direction, 1)), 35%);
              }
        
        .cube-face .circle .heart-container::before { --direction: -1; }
        
        .cube-face .h-line,
          .cube-face .v-line {
            width: 5%;
            height: 100%;
            background: var(--pink-cube-color);
            border-left: 1px solid #ff96bd;
            border-right: 1px solid #964160;
            position: absolute;
          }
        
        .cube-face .v-line {
            transform: rotate(90deg);
          }
        
        @-webkit-keyframes walkCube {
          0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0); }
          100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }
        
        @keyframes walkCube {
          0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0); }
          100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }
        
        .floor-container {
          width: 200vw;
          height: 100vh;
          position: absolute;
          top: 0;
          left: -50%;
          z-index: -5;
          display: flex;
          flex-wrap: wrap;
          perspective: 400px;
        }
        
        .floor-container .floor {
            width: 100%;
            height: 50%;
            background-image:
              repeating-linear-gradient(
                to bottom,
                transparent 0 200px,
                #333 200px 202px
              ),
              repeating-linear-gradient(
                to right,
                #e1e8e5 0 100px,
                #333 100px 102px
              );
            position: absolute;
            bottom: 0;
            transform: rotateX(45deg);
          }
        
        .floor-container .wall {
            width: 100%;
            height: 100%;
            background-image:
              repeating-linear-gradient(
                to bottom,
                transparent 0 200px,
                #aaa 200px 202px
              ),
              repeating-linear-gradient(
                to right,
                #2d3237 0 100px,
                #aaa 100px 102px
              );
            position: absolute;
            z-index: -2;
          }
        
     
    </style>

</head>

<body>
    <div class="container">
        <div class="companion-cube">

            <div class="cube-face front">
                <div class="h-line"></div>
                <div class="v-line"></div>
                <div class="circle">
                    <div class="heart-container">
                        <.........完整代码请登录后点击上方下载按钮下载查看