css实现三维3d游乐场旋转木马动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现三维3d游乐场旋转木马动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *:after,
        *:before {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        @property --jump {
          initial-value: 0%;
          syntax: '<percentage>';
          inherits: false;
        }
        @property --spin {
          initial-value: 0deg;
          syntax: '<angle>';
          inherits: false;
        }
        @property --hue {
          initial-value: 0;
          syntax: '<number>';
          inherits: false;
        }
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          background: var(--bg);
          overflow: hidden;
        }
        :root {
          --bg: #121921;
          --height: 16;
          --width: 20;
          --speed: 5;
          --horseSpeed: 2;
          --horseSize: 5;
          --base-depth: 10;
          --pillar-depth: 4;
          --pillar: #8c8c8c;
          --window: #fcf7e8;
          --sill: #e6b319;
          --lights: #fff;
          --primary: #b447eb;
          --secondary: #fafafa;
          --base-coefficient: 0.75vmin;
          --base-height: 20;
          --base-hole: 0.6vmin;
          --base-stripe: 3.9;
        }
        .carousel {
          height: calc(var(--height) * 1vmin);
          width: calc(var(--width) * 1vmin);
          transform: translate(-50%, -50%) rotateX(-15deg) rotateY(40deg);
          position: absolute;
          top: 50%;
          left: 50%;
        }
        .carousel__core {
          bottom: -10%;
          height: 110%;
          left: 50%;
          position: absolute;
          transform: translate(-50%, 0);
          width: calc(var(--width) * 0.2vmin);
        }
        .carousel__core div {
          background: var(--pillar);
          height: 100%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) translate3d(0, 0, calc((var(--width) * 0.4) * 0.75vmin)) rotateY(180deg);
          width: 100%;
          filter: brightness(0.9);
        }
        .carousel__core div:nth-of-type(even) {
          filter: brightness(1);
        }
        .carousel__core div:nth-of-type(even):after {
          background: var(--window);
          border: 2px solid var(--sill);
          border-radius: 35% 35% 0 0;
          content: '';
          height: 20%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, 0%);
          width: 60%;
        }
        .carousel__light {
          width: 15%;
          height: 15%;
          position: absolute;
          background: hsl(var(--hue, 0), 90%, 80%);
          filter: blur(10px), brightness(1.1);
          top: 50%;
          left: 50%;
          border-radius: 50%;
          transform: translate(-50%, -50%);
          -webkit-animation: party calc(var(--party-speed, 1) * 1s) calc(var(--delay, 1) * -1s) infinite linear;
                  animation: party calc(var(--party-speed, 1) * 1s) calc(var(--delay, 1) * -1s) infinite linear;
        }
        .carousel__lightring {
          position: absolute;
          top: 100%;
          left: 50%;
          background: #fcf1cf;
          border-radius: 50%;
          filter: blur(4vmin);
          height: calc(var(--width) * 2.3vmin);
          width: calc(var(--width) * 2.3vmin);
          transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * -0.1vmin));
        }
        .carousel__horses {
          -webkit-animation: spin calc(var(--speed) * 1s) infinite linear;
                  animation: spin calc(var(--speed) * 1s) infinite linear;
          height: 100%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%) rotateY(var(--spin));
          width: 100%;
          z-index: 5;
        }
        .carousel__horse {
          --depth: calc(var(--width) * var(--depth-coefficient));
          -webkit-animation: jump calc(var(--horseSpeed) * 1s) calc((var(--horseSpeed) * var(--delay)) * 1s) infinite linear both;
                  animation: jump calc(var(--horseSpeed) * 1s) calc((var(--horseSpeed) * var(--delay)) * 1s) infinite linear both;
          font-size: calc(var(--horseSize) * 1vmin);
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, var(--jump)) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1vmin)) rotateY(180deg);
        }
        .carousel__horse:nth-of-type(even) {
          --depth: calc(var(--width) * var(--depth-coefficient));
        }
        .carousel__base {
          -webkit-animation: spin calc(var(--speed) * 1s) infinite linear;
                  animation: spin calc(var(--speed) * 1s) infinite linear;
          left: 50%;
          position: absolute;
          top: 100%;
          transform: translate(-50%, -50%) rotateY(var(--spin));
          height: 20%;
.........完整代码请登录后点击上方下载按钮下载查看