div+css实现万圣节夜晚森林中独行动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现万圣节夜晚森林中独行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">



    <style>
        :root {
          --bg1: #101974;
          --bg2: #131e86;
        }
        
        /***********************/
        /***********************/
        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          transform-style: preserve-3d;
          user-select: none;
          -webkit-tap-highlight-color: transparent;
          appearance: none;
          font-family: "Nosifer", cursive;
          color: #ffffff;
        }
        
        /***********************/
        /***********************/
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          width: 100%;
          overflow: hidden;
          background-color: #131e86;
        }
        
        .main {
          width: 120vmin;
          height: 90vmin;
          background-image: linear-gradient(to top, var(--bg1), var(--bg2));
          overflow: hidden;
          animation: colors linear 12000ms infinite;
        }
        
        @keyframes colors {
          0%, 50%, 52%, 54%, 100% {
            --bg1: #131e86;
          }
          51%, 53% {
            --bg1: #222d93;
          }
        }
        .start {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          width: 100%;
          height: 100%;
          transition: all 2000ms;
          background-color: #131e86;
          cursor: pointer;
        }
        .start h1 {
          font-size: 9vmin;
          text-transform: capitalize;
          animation: start 500ms linear infinite alternate;
        }
        
        @keyframes start {
          to {
            opacity: 0.5;
          }
        }
        .is-start-visible {
          opacity: 0;
        }
        
        .is-start-hidden {
          display: none;
        }
        
        .fog {
          position: absolute;
          width: 100%;
          height: 100%;
          box-shadow: inset 0 0 6vmin 6.75vmin #131e86;
          cursor: none;
        }
        
        .layer {
          display: flex;
          align-items: flex-end;
          position: relative;
          width: 100%;
          height: 100%;
        }
        
        .slider {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        
        .tree {
          position: absolute;
          bottom: 0;
        }
        
        .owl {
          position: absolute;
          width: 6vmin;
          height: 9vmin;
          transform-origin: bottom;
        }
        .owl .head {
          position: absolute;
          width: 4.5vmin;
          height: 4.5vmin;
          border-radius: 50%;
          background-color: #14146f;
          animation: head 4000ms linear infinite alternate;
        }
        .owl .head::before, .owl .head::after {
          content: "";
          position: absolute;
          top: 40%;
          width: 0.75vmin;
          height: 0.75vmin;
          border-radius: 100% 0% 100% 0%/100% 0% 100% 0%;
          background-color: #999999;
          animation: owl linear 10000ms infinite;
        }
        .owl .head::before {
          left: 22%;
          border-radius: 0% 100% 0% 100%/0% 100% 0% 100%;
        }
        .owl .head::after {
          right: 22%;
          border-radius: 100% 0% 100% 0%/100% 0% 100% 0%;
        }
        .owl .body {
          position: absolute;
          width: 6vmin;
          height: 6vmin;
          bottom: 0;
          border-radius: 56% 44% 63% 37%/45% 100% 0% 55%;
          background-color: #14146f;
        }
        
        @keyframes owl {
          0%, 50%, 54%, 58%, 82%, 100% {
            background-color: #999999;
          }
          52%, 56%, 60%, 80% {
            background-color: #14146f;
          }
        }
        @keyframes head {
          0%, 47% {
            transform: rotateZ(0);
          }
          53%, 100% {
            transform: rotateZ(45deg);
          }
        }
        /***********************/
        /***********************/
        .moon {
          position: absolute;
          top: 8.25vmin;
          left: 24vmin;
          width: 6.75vmin;
          height: 6.75vmin;
          overflow: hidden;
          background-image: radial-gradient(circle at 100% 25%, transparent 50%, #ffffff 50%);
          border-radius: 50%;
        }
        
        .layer-01 .tree {
          width: 4.5vmin;
          height: 100%;
          background-color: #131c81;
          clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        }
        .layer-01 .tree-01 {
          left: 9.9vmin;
        }
        .layer-01 .tree-02 {
          left: 33.3vmin;
        }
        .layer-01 .tree-03 {
          left: 45vmin;
        }
        .layer-01 .tree-04 {
          left: 74.25vmin;
        }
        .layer-01 .tree-05 {
          left: 91.5vmin;
        }
        
        .slider-tree {
          width: 300%;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          flex-wrap: nowrap;
          filter: blur(0.3vmin);
        }
        
        .layer-tree {
          width: 150%;
          animation: layer 32000ms linear infinite;
        }
        
        .layer-tree .tree {
          display: flex;
          justify-content: center;
          background-color: #17218e;
          position: absolute;
        }
        .layer-tree .tree::before {
          content: "";
          position: absolute;
          height: 100%;
          width: 17%;
          top: 15vmin;
          border-top-left-radius: 3vmin;
          border-top-right-radius: 3vmin;
          background-image: linear-gradient(91deg, transparent 20%, #131c81 20%), linear-gradient(-91deg, transparent 20%, #131c81 20%);
          background-size: 50%;
          background-repeat: no-repeat;
          background-position: 0 0, 100% 0;
        }
        .layer-tree .tree::after {
          content: "";
          position: absolute;
          top: 35%;
          right: 20%;
          width: 17%;
          height: 10%;
          border-radius: 50%;
          background-color: #1b26a4;
        }
        .layer-tree .tree-01,
        .layer-tree .tree-02 {
          height: 27vmin;
          width: 18vmin;
          bottom: 33vmin;
          left: 75vmin;
          border-radius: 50% 50% 48% 52%/60% 60% 40% 40%;
        }
        .layer-tree .tree-02 {
          left: 135vmin;
          height: 24vmin;
          width: 18vmin;
        }
        .layer-tree .tree-03 {
          height: 33vmin;
          width: 21vmin;
          bottom: 33vmin;
          left: 3vmin;
          border-radius: 50% 50% 48% 52%/60% 60% 40% 40%;
        }
        .layer-tree .tree-03::after {
          content: "";
          position: absolute;
          left: 40%;
          top: 50%;
          transform-origin: bottom left;
          width: 9vmin;
          height: 9vmin;
          background-color: #131c81;
          clip-path: polygon(26% 59%, 42% 79%, 79% 79%, 100% 60%, 100% 100%, 44% 100%, 2% 100%, 0 77%);
        }
        
        .slider-02 {
          width: 300%;
          display: flex;
          flex-direction: row-reverse;
          flex-wrap: nowrap;
        }
        
        .layer-02 {
          width: 150%;
          animation: layer 12000ms linear infinite;
        }
        
        .layer-02 .house {
          position: absolute;
          width: 30vmin;
          height: 15vmin;
          bottom: 21vmin;
          left: 129vmin;
          background-image: linear-gradient(to right, #f81744 2.55vmin, transparent 2.55vmin 3.3vmin, #f81744 3.3vmin), linear-gradient(to right, #101a7e 70%, #14146f 70%);
          background-size: 6vmin 3.75vmin, 100% 100%;
          background-position: 40% 30%, 0 0;
          background-repeat: no-repeat;
          animation: windows 5000ms linear infinite alternate;
        }
        .layer-02 .house::after, .layer-02 .house::before {
          content: "";
          position: absolute;
          top: -6vmin;
          height: 6vmin;
        }
        .layer-02 .house::after {
          width: 70%;
          transform-origin: bottom left;
          transform: skewX(-36deg);
          background-color: #101a7e;
        }
        .layer-02 .house::before {
          right: 0;
          width: 50%;
          transform-origin: bottom right;
          transform: skewX(36deg);
          background-color: #14146f;
        }
        .layer-02 .house .fireplace {
          position: absolute;
          bottom: 100%;
          width: 3vmin;
          height: 9vmin;
          left: 6vmin;
          background-color: #101a7e;
        }
        .layer-02 .house .fireplace::before {
          content: "";
          position: absolute;
          width: 3vmin;
          height: 6vmin;
          border-radius: 50%;
          background-color: #101a7e;
          animation: fireplace 1000ms linear infinite;
          filter: blur(0.225vmin);
        }
        @keyframes windows {
          0%, 45%, 55%, 65%, 100% {
            background-image: linear-gradient(to right, #f81744 2.55vmin, transparent 2.55vmin 3.3vmin, #f81744 3.3vmin), linear-gradient(to right, #101a7e 70%, #14146f 70%);
          }
          50%, 60% {
            background-image: linear-gradient(to right, #73031a 2.55vmin, transparent 2.55vmin 3.3vmin, #8b041f 3.3vmin), linear-gradient(to right, #101a7e 70%, #14146f 70%);
          }
        }
        @keyframes fireplace {
          to {
            transform: translateY(-9vmin) scaleY(2);
            opacity: 0.1;
          }
        }
        .layer-02 .tree {
          height: 100%;
          width: 6.75vmin;
          background-image: linear-gradient(90.5deg, transparent 20%, #101a7e 20%), linear-gradient(-90.5deg, transparent 20%, #101a7e 20%);
          background-size: 50%;
          background-repeat: no-repeat;
          background-position: 0 0, 100% 0;
        }
        .layer-02 .tree::before, .layer-02 .tree::after {
          content: "";
          position: absolute;
          background-color: #101a7e;
        }
        .layer-02 .tree::before {
          left: 1.5vmin;
          transform-origin: bottom left;
          transform: rotateZ(-30deg);
        }
        .layer-02 .tree::after {
          right: 1.5vmin;
          transform-origin: bottom right;
          transform: rotateZ(30deg);
        }
        .layer-02 .tree-01 {
          left: 9vmin;
        }
        .layer-02 .tree-01::before {
          bottom: 27vmin;
          width: 3vmin;
          height: 12vmin;
          clip-path: polygon(3% 3%, 0 44%, 39% 66%, 100% 100%, 100% 62%, 79% 31%, 68% 52%);
        }
        .layer-02 .tree-01::after {
          bottom: 39vmin;
          width: 3vmin;
          height: 15vmin;
          clip-path: polygon(45% 48%, 0 70%, 0 100%, 72% 80%, 100% 62%, 100% 54%, 75% 0);
        }
        .layer-02 .tree-02 {
          left: 33.3vmin;
          width: 7.5vmin;
        }
        .layer-02 .tree-02::before {
          bottom: 36vmin;
          width: 3vmin;
          height: 6vmin;
          clip-path: polygon(0 16%, 0 39%, 100% 100%, 100% 82%, 100% 62%, 99% 42%, 18% 16%);
        }
        .layer-02 .tree-03 {
          left: 66vmin;
          width: 6.375vmin;
        }
        .layer-02 .tree-03::after {
          bottom: 39vmin;
          width: 3vmin;
          height: 15vmin;
          clip-path: polygon(0 100%, 30% 100%, 60% 95%, 69% 91%, 80% 77%, 92% 61%, 95% 45%, 94% 28%, 85% 24%, 70% 34%, 54% 56%, 28% 65%, 14% 75%, 0% 79%);
        }
        .layer-02 .tree-04 {
          left: 90vmin;
          width: 7.05vmin;
        }
        .layer-02 .tree-04::before {
          bottom: 39vmin;
          width: 3vmin;
          height: 9vmin;
          clip-path: polygon(0 100%, 30% 100%, 66% 77%, 92% 61%, 95% 45%, 94% 28%, 70% 59%, 45% 17%, 0 39%);
        }
        .layer-02 .tree-04::after {
          bottom: 30vmin;
          width: 3vmin;
          height: 18vmin;
          clip-path: polygon(8% 65%, 100% 100%, 100% 85%, 100% 6%, 75% 17%, 28% 6%, 60% 45%, 26% 37%, 33% 59%);
        }
        .layer-02 .tree-05 {
          left: 117vmin;
          width: 7.05vmin;
        }
        .layer-02 .tree-05::before {
          bottom: 27vmin;
          width: 3vmin;
          height: 24vmin;
          clip-path: polygon(0% 75%, 35% 95%, 77% 99%, 96% 86%, 72% 76%, 27% 62%);
        }
        .layer-02 .tree-06 {
          left: 164.25vmin;
        }
        .layer-02 .tree-06::before {
          bottom: 27vmin;
          width: 3vmin;
          height: 12vmin;
          clip-path: polygon(0% 75%, 35% 95%, 77% 99%, 96% 86%, 72% 76%, 27% 62%);
        }
        .layer-02 .tree-cta {
          left: 44.25vmin;
          height: 65%;
          background-image: linear-gradient(93deg, transparent 25%, #14146f 25%), linear-gradient(-93deg, transparent 25%, #14146f 25%);
        }
        .layer-02 .tree-cta::before {
          bottom: 42vmin;
          width: 12vmin;
          height: 12vmin;
          transform: rotateZ(0);
          background-color: #14146f;
          clip-path: polygon(0 100%, 49% 100%, 88% 100%, 93% 73%, 98% 29%, 98% 0, 87% 14%, 85% 35%, 71% 21%, 71% 35%, 76% 49%, 68% 70%, 0 68%);
        }
        .layer-02 .tree-cta::after {
          right: 4.5vmin;
          bottom: 42vmin;
          width: 12vmin;
          height: 6vmin;
          background-color: #14146f;
          clip-path: polygon(0 100%, 49% 100%, 100% 100%, 100% 69%, 100% 0, 68% 23%, 54% 53%, 22% 67%, 0 73%);
        }
        .layer-02 .owl {
          bottom: 46.5vmin;
          left: 39vmin;
          transform: scale(0.75);
        }
        
        .slider-03 {
          width: 300%;
          display: flex;
          flex-wrap: nowrap;
        }
        
        .layer-03 {
          width: 150%;
          animation: layer 8000ms linear infinite;
        }
        
        .layer-03 .ground {
          width: 100%;
          height: 90%;
          clip-path: polygon(0% 65%, 25% 71%, 42% 62%, 65% 66%, 82% 67%, 100% 65%, 100% 100%, 0 100%);
          background-color: #14146f;
        }
        .layer-03 .stone {
          position: absolute;
          width: 9vmin;
          height: 9vmin;
          left: 0vmin;
          bottom: 27vmin;
          transform-origin: bottom right;
          transform: rotateZ(-10deg);
          clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
          background-color: #14146f;
        }
     .........完整代码请登录后点击上方下载按钮下载查看