css实现雪山日出日落动画效果代码-html代码-BFW代码库

css实现雪山日出日落动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现雪山日出日落动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          background: black;
        }
        
        .scene {
          position: relative;
          width: 100%;
          height: 100vh;
          overflow: hidden;
          background: skyblue;
          -webkit-animation: sky 10s ease-out alternate infinite;
                  animation: sky 10s ease-out alternate infinite;
        }
        
        .mountain {
          position: absolute;
          bottom: 0;
          width: 50%;
          min-width: 250px;
          height: 70vh;
          background: #4d5163;
          -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          -webkit-animation: mountain 10s ease-out alternate infinite;
                  animation: mountain 10s ease-out alternate infinite;
        }
        .mountain--center {
          left: 50%;
          transform: translate(-50%);
        }
        .mountain--small {
          height: 50vh;
        }
        .mountain--left {
          width: 40%;
          left: 0;
        }
        .mountain--right {
          width: 40%;
          right: 0;
        }
        .mountain::before {
          content: "";
          position: absolute;
          top: 0;
          left: 50%;
          width: 25vh;
          height: 25vh;
          background: white;
          transform: translate(-50%, 0) rotate(45deg);
          -webkit-animation: fade 10s ease-out alternate infinite;
                  animation: fade 10s ease-out alternate infinite;
        }
        .mountain::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 50%;
          height: 100%;
          background: rgba(137, 160, 168, 0.2);
          -webkit-animation: fade 10s ease-out alternate infinite;
                  animation: fade 10s ease-out alternate infinite;
        }
        
        .trees {
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          width: 100%;
        }
        
        .tree {
          flex-grow: 1;
          background: #335935;
          width: 6.25%;
          min-width: 16px;
          height: 6vmin;
          min-height: 64px;
          -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          -webkit-animation: tree 10s ease-out alternate infinite;
                  animation: tree 10s ease-out alternate infinite;
        }
        
        .sun {
          width: 50vmin;
          min-width: 150px;
          height: 50vmin;
          min-height: 150px;
          background: #ffd71c;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          -webkit-animation: sunrise 10s ease-out alternate infinite;
                  animation: sunrise 10s ease-out alternate infinite;
        }
        
        .ground {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 3vmin;
          min-height: 32px;
          background: #0f0b09;.........完整代码请登录后点击上方下载按钮下载查看