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

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

代码语言：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);
          }
        }
        /***********************/
        /*****.........完整代码请登录后点击上方下载按钮下载查看