css实现三维跳动的盒子动画效果代码-html代码-BFW代码库

css实现三维跳动的盒子动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现三维跳动的盒子动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *::before, *::after {
          padding: 0;
          margin: 0 auto;
          box-sizing: border-box;
        }
        
        html {
          font-size: 0.83vw;
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          background-image: linear-gradient(#100, #001);
          perspective: 60em;
          overflow: hidden;
        }
        body *:not(:empty) {
          transform-style: preserve-3d;
        }
        
        .scene {
          position: relative;
          -webkit-animation: sceneRotate 120s infinite linear;
                  animation: sceneRotate 120s infinite linear;
        }
        @-webkit-keyframes sceneRotate {
          from {
            transform: rotateX(-15deg) rotateY(0deg);
          }
          to {
            transform: rotateX(-15deg) rotateY(-360deg);
          }
        }
        @keyframes sceneRotate {
          from {
            transform: rotateX(-15deg) rotateY(0deg);
          }
          to {
            transform: rotateX(-15deg) rotateY(-360deg);
          }
        }
        .scene * {
          position: absolute;
        }
        
        .cube_arm {
          bottom: -6em;
          width: 48em;
          height: 2px;
          -webkit-animation: ballArmT 120s var(--delay, 0s) infinite ease-in-out, ballArmS 6s var(--delay, 0s) infinite;
                  animation: ballArmT 120s var(--delay, 0s) infinite ease-in-out, ballArmS 6s var(--delay, 0s) infinite;
          transform-origin: bottom left;
        }
        @-webkit-keyframes ballArmT {
          0% {
            transform: rotateY(0deg);
          }
          5% {
            transform: rotateY(162deg);
          }
          10% {
            transform: rotateY(324deg);
          }
          15% {
            transform: rotateY(486deg);
          }
          20% {
            transform: rotateY(648deg);
          }
          25% {
            transform: rotateY(810deg);
          }
          30% {
            transform: rotateY(972deg);
          }
          35% {
            transform: rotateY(1134deg);
          }
          40% {
            transform: rotateY(1296deg);
          }
          45% {
            transform: rotateY(1458deg);
          }
          50% {
            transform: rotateY(1620deg);
          }
          55% {
            transform: rotateY(1782deg);
          }
          60% {
            transform: rotateY(1944deg);
          }
          65% {
            transform: rotateY(2106deg);
          }
          70% {
            transform: rotateY(2268deg);
          }
          75% {
            transform: rotateY(2430deg);
          }
          80% {
            transform: rotateY(2592deg);
          }
          85% {
            transform: rotateY(2754deg);
          }
          90% {
            transform: rotateY(2916deg);
          }
          95% {
            transform: rotateY(3078deg);
          }
          100% {
            transform: rotateY(3240deg);
          }
        }
        @keyframes ballArmT {
          0% {
            transform: rotateY(0deg);
          }
          5% {
            transform: rotateY(162deg);
          }
          10% {
            transform: rotateY(324deg);
          }
          15% {
            transform: rotateY(486deg);
          }
          20% {
            transform: rotateY(648deg);
          }
          25% {
            transform: rotateY(810deg);
          }
          30% {
            transform: rotateY(972deg);
          }
          35% {
            transform: rotateY(1134deg);
          }
          40% {
            transform: rotateY(1296deg);
          }
          45% {
            transform: rotateY(1458deg);
          }
          50% {
            transform: rotateY(1620deg);
          }
          55% {
            transform: rotateY(1782deg);
          }
          60% {
            transform: rotateY(1944deg);
          }
          65% {
            transform: rotateY(2106deg);
          }
          70% {
            transform: rotateY(2268deg);
          }
          75% {
            transform: rotateY(2430deg);
          }
          80% {
            transform: rotateY(2592deg);
          }
          85% {
            transform: rotateY(2754deg);
          }
          90% {
            transform: rotateY(2916deg);
          }
          95% {
            transform: rotateY(3078deg);
          }
          100% {
            transform: rotateY(3240deg);
          }
        }
        @-webkit-keyframes ballArmS {
          0%, 100% {
            width: 24em;
            height: 0;
            -webkit-animation-timing-function: ease-out.........完整代码请登录后点击上方下载按钮下载查看