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%.........完整代码请登录后点击上方下载按钮下载查看