css实现一个太阳照西山的画作效果代码-html代码-BFW代码库

css实现一个太阳照西山的画作效果代码

代码语言：html

代码描述：css实现一个太阳照西山的画作效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /* Mixins Starts here */
        /* Mixins End here */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html,
        body {
          height: 100%;
          background: #cecdcd;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          font-size: 62.5%;
        }
        
        .frame {
          transform: scale(1.5);
          width: 20rem;
          height: 25rem;
          background: linear-gradient(#a6adb7, #dbd1d4);
          outline: 5px solid gray;
          box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
          position: relative;
          overflow: hidden;
        }
        
        .mountains {
          position: absolute;
          width: 100%;
          height: 65%;
          bottom: -1rem;
        }
        
        .mountain-1 {
          width: 12rem;
          height: 30rem;
          transform: rotate(-65deg);
          background: #41354e;
          position: absolute;
          bottom: -15rem;
          left: -2rem;
          z-index: 10;
        }
        
        .mountain-2 {
          width: 25rem;
          height: 20rem;
          transform: rotate(-20deg);
          background: #2d556a;
          position: absolute;
          bottom: -10rem;
          right: -5rem;
          z-index: 9;
        }
        
        .mountain-3 {
          width: 30rem;
          height: 30rem;
          transform: rotate(-45deg);
          background: #6f8695;
          z-index: 8;
          position: absolute;
          left: -5rem;
          bottom: -18rem;
        }
        
        .mountain-4 {
          width: 30rem;
          height: 30rem;
          transform: rotate(-45deg);
          background: #adb1b9;
          z-index: 7;
          position: absolute;
          left: -13rem;
          bottom: -20rem;
        }
        
        .sky {
          height: 100%;
        }
        
        .moon {
          width: 3rem;
          height: 3rem;
          background: #fff;
          border-radius: 100%;
          box-shadow: 0px 0px 20px 1px #fff;
          position: absolute;
          top: 5rem;
          bottom: 0;
          left: 4rem;
          right: 0;
        }
        
        .star-1 {
          width: 0.3rem;
          height: 0.3rem;
          background: rgba(255, 255, 255, 0.596);
          border-radius: 1.........完整代码请登录后点击上方下载按钮下载查看