程序员的中秋节

比眉伴天荒 2023-10-05 23:22 37阅读 0赞

## 程序员的中秋 ##

八月的夜，有点寒，凄凄的月色透过纱窗，无力地落到床前，淡淡的一片白，又给我带来了一个不眠之夜。明知无人与之同乐，只好由自己的思绪在夜色里游荡。好在白天闲来时，习惯于捡拾树荫底下那一片片破碎的阳光，放到口袋里，留到晚上寂寞时，用来温暖自己的心。

很久以前，曾一度热情，用年轻的心去图划未来，那份执着的追求，曾有过不少的亮点，虽然在商海里留下了伤痕，在爱海里，留下了伤痛，但内心仍然藏着一丝丝的自豪，那是因为曾经尽力搏击，曾经拥有那份含恨的爱。随着月圆月缺，那份热情早已当做古玩收藏于心底，爱已消亡。如洁的月光，现在看来已经变得冷漠，节日的气氛更加撩起诸多的痛。我愿带着一片宁静去寻找属于自己的世界，在哪里安然地细品人生。

然而，如今那一片宁静也已经变得飘渺，商化的社会，到处一片沸腾。或许，宁静需要自己去体会，需要一个历练的过程，没有豁达的胸怀和顽强的意志，那一片宁静将从身边飘走。

多年以来，从不敢贸然尝试一口中秋之月，只是怕，孤单只影的我坏了团聚的味道，不忍心把好好的一个园咬缺，然后独自把它吞并。多么的希望，你我一起把它掰开，分成两半，放到各自的身体里，无论你在哪里，你我永远都是一个园。

这样的夜，思绪在寂虑中仿佛脱体狂奔，却理不成形。孩时的童影，学时的同窗，一起挣食的友人，亲人，还有已经走远的先辈们都堆积在一起，这种抹不去的印记像雾一样缭绕，禁不住一番感慨，多么的想，寻回我来时的起点，从新品味每每的月圆月缺。　　  
  
岁月的足迹渐行渐远，已不必为生活的沧桑添加太多言语，往事如焉，爱亦然，恨亦然，人生也亦然。

秋又起，屋外的树，偶有落叶沙沙，那是为了来年的新生，我是否也能再度扬帆？直到现在，还迷茫。我想，趁着这夜色，悄悄地，在床前这淡淡的一片白里，画上几笔色彩，添上几句心语，捎到这片白的另一端，为我解开心中的结。

程序员过中秋

在代码的世界里过中秋，用代码表达对亲人的爱意。纪这个浓重的日子。

HTMl

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <title>Mid-Autumn</title>
        <link rel="stylesheet" href="index.css" type="text/css"></link>
      </head>
      <body>
        <div class="mid-autumn-body" id="midAutumn">
          <div class="sky" id="sky">
            <div class="moon">
              <div class="moon-shadow" id="moonShadow"></div>
              <svg width="0" height="0">
                <filter id="filter">
                  <feTurbulence type="fractalNoise" baseFrequency="0.034" numOctaves="4" seed="0" />
                  <feDisplacementMap in="SourceGraphic" scale="150" />
                </filter>
              </svg>
            </div>
          </div>
          <div class="latern" id="latern">
            <div class="kongming-latern">
              <div class="latern-left"></div>
              <div class="latern-right"></div>
              <div class="latern-bottom"></div>
            </div>
            <div class="kongming-latern">
              <div class="latern-left"></div>
              <div class="latern-right"></div>
              <div class="latern-bottom"></div>
            </div>
            <div class="kongming-latern">
              <div class="latern-left"></div>
              <div class="latern-right"></div>
              <div class="latern-bottom"></div>
            </div>
            <div class="kongming-latern-litle">
              <div class="latern-left"></div>
              <div class="latern-right"></div>
              <div class="latern-bottom"></div>
            </div>
          </div>
          <div class="house" id="house">
            <div class="top-roof" id="topRoof">
              <div class="tile"></div>
              <div class="edge"></div>
              <div class="roof-body"></div>
            </div>
            <div class="bottom-roof" id="bottomRoof">
            </div>
          </div>
        </div>
        <script src='index.js'></script>
      </body>
    </html>

css

body {
        
      margin: 0;
    }
    
    @keyframes FlyOne {
        
      10% {
        
        transform: translateX(7vw) translateY(-10vh) rotate(0deg);
      }
      40% {
        
        transform: translateX(2vw) translateY(-30vh) rotate(5deg);
      }
      70% {
        
        transform: translateX(10vw) translateY(-70vh) rotate(-5deg);
      }
      100% {
        
        transform: translateX(3vw) translateY(-120vh) rotate(3deg);
    	}
    }
    
    @keyframes FlyTwo {
        
      10% {
        
        transform: translateX(2vw) translateY(-15vh) rotate(0deg);
      }
      40% {
        
        transform: translateX(10vw) translateY(-60vh) rotate(5deg);
      }
      70% {
        
        transform: translateX(3vw) translateY(-90vh) rotate(-5deg);
      }
      100% {
        
        transform: translateX(12vw) translateY(-100vh) rotate(3deg);
        opacity: 0.1;
    	}
    }
    
    @keyframes FlyThree {
        
      10% {
        
        transform: translateX(5vw) translateY(-20vh) rotate(0deg);
        opacity: 1;
      }
      40% {
        
        transform: translateX(1vw) translateY(-50vh) rotate(5deg);
        opacity: 0.8;
      }
      70% {
        
        transform: translateX(7vw) translateY(-80vh) rotate(-5deg);
        opacity: 0.7;
      }
      100% {
        
        transform: translateX(14vw) translateY(-100vh) rotate(3deg);
        opacity: 0.1;
    	}
    }
    
    @keyframes FlyFour {
        
      100% {
        
        transform: translateY(-100vh);
        opacity: 0.1;
    	}
    }
    
    @keyframes Wink {
        
      100% {
        
        width: 0;
    	}
    }
    
    .mid-autumn-body {
        
      position: fixed;
      width: 15vw;
      height: 100vh;
      background: linear-gradient(-180deg, #041039, #418cbc, #fff);
      overflow: hidden;
    }
    
    .moon {
        
      position: absolute;
      border-radius: 100%;
      width: 10vw;
      height: 10vw;
      background: radial-gradient(#fffee8, #fdfe8e, #faf193);
      box-shadow: 0 0 40px 20px #fff;
      left: 1vw;
      top: 1vw;
    }
    
    .moon-shadow {
        
      width: 4vw;
      height: 7vw;
      border-radius: 100%;
      position: absolute;
      top: 1vw;
      left: 4.7vw;
      /* background: linear-gradient(51deg, #f0c519, #fbee4f, #fefebe); */
      background: linear-gradient(51deg, #f8de2b, #f5d633, #fdf956, #feff7f, #fefec6);
    }
    
    #moonShadow {
        
      filter: url(#filter);
    }
    
    .kongming-latern, .kongming-latern-litle {
        
      position: absolute;
      height: 5.1vw;
      width: 3.5vw;
      bottom: -8vw;
      background: linear-gradient(#92090e, #ea3d2d, #fbf885);
      animation: FlyOne 22s linear infinite;
    }
    
    .latern-left {
        
      border-left: 5vw solid transparent;
      border-right: 1vw solid transparent;
      border-bottom: 0.9vw solid #ea4c35;
      transform: rotate(-90deg);
      position: relative;
      top: 2.5vw;
      left: -3.4vw;
    }
    
    .latern-right {
        
      border-left: 1vw solid transparent;
      border-right: 5vw solid transparent;
      border-bottom: 0.9vw solid #ea4c35;
      transform: rotate(90deg);
      position: relative;
      top: 1.6vw;
      left: 0.9vw;
    }
    
    .latern-bottom {
        
      position: relative;
      top: 3vw;
      width: 3.5vw;
      height: 1.2vw;
      background: radial-gradient(#fff, #fbf885, #ea3d2d);
      border-radius: 2vw;
    }
    
    .kongming-latern {
        
      z-index: 2;
    }
    
    .kongming-latern:nth-child(2), .kongming-latern:nth-child(3) {
        
      animation: FlyThree 18s linear infinite;
      animation-delay: 6s;
      height: 3.7vw;
      left: 5vw;
      width: 2.5vw;
      bottom: -10vw;
    }
    
    .kongming-latern:nth-child(2) {
        
      bottom: -7vw;
      left: 2vw;
      animation: FlyTwo 15s linear infinite;
      animation-delay: 2s;
    }
    
    .kongming-latern:nth-child(2) .latern-left, .kongming-latern:nth-child(3) .latern-left {
        
      border-left: 3vw solid transparent;
      top: 1.5vw;
      left: -2.4vw;
    }
    
    .kongming-latern:nth-child(2) .latern-right, .kongming-latern:nth-child(3) .latern-right {
        
      border-right: 3vw solid transparent;
      top: 0.6vw;
      left: 0.9vw;
    }
    
    .kongming-latern:nth-child(2) .latern-bottom, .kongming-latern:nth-child(3) .latern-bottom {
        
      top: 1.6vw;
      height: 1vw;
      width: 2.5vw;
    }
    
    .kongming-latern-litle {
        
      height: 2vw;
      left: 5vw;
      width: 1.2vw;
      bottom: 5vw;
      animation: FlyFour 15s linear infinite;
    }
    
    .kongming-latern-litle .latern-left {
        
      border-left: 1.7vw solid transparent;
      border-right: 0.3vw solid transparent;
      border-bottom: 0.5vw solid #ea4c35;
      top: 0.75vw;
      left: -1.2vw;
    }
    
    .kongming-latern-litle .latern-right {
        
      border-left: 0.3vw solid transparent;
      border-right: 1.7vw solid transparent;
      border-bottom: 0.5vw solid #ea4c35;
      top: 0.26vw;
      left: 0.4vw;
    }
    
    .kongming-latern-litle .latern-bottom {
        
      top: 0.6vw;
      width: 1.2vw;
      height: 0.5vw;
    }
    
    .star {
        
      position: absolute;
      height: 0.1vw;
      width: 0.1vw;
      border-radius: 1vw;
      background: #fff;
    }
    
    .top-roof {
        
      position: absolute;
      bottom: 6vw;
      right: 0;
      border-left: 10vw solid transparent;
      border-right: 0vw solid transparent;
      border-bottom: 4vw solid #2b2a49;
    }
    
    .top-roof:before {
        
      content: '';
      border-bottom: 0.7vw solid #2b2a49;
      width: 11vw;
      height: 5vw;
      position: absolute;
      border-bottom-left-radius: 50%;
      border-top-left-radius: 50%;
      transform: rotate(-23deg) translate(0.7vw, -3vw);
      right: -0.2vw;
      /* top: 0.8vw; */
    }
    
    .top-roof:after {
        
      content: '';
      width: 10vw;
      height: 2vw;
      background: linear-gradient(#23314e, #657297, transparent);
      position: absolute;
      right: 0;
      top: 4vw;
      border-bottom-left-radius: 3vw;
    }
    
    .tile {
        
      position: absolute;
      width: 0.6vw;
      height: 1.5vw;
      background: linear-gradient(90deg, #f7fcff, #667396, #2b2a49);
      right: 0;
      border-radius: 0.2vw;
      transform: rotate(45deg) translate(-4vw, 8vw);
    }
    
    .edge {
        
      position: absolute;
      right: 9vw;
      width: 0.7vw;
      height: 0.4vw;
      background: #f7fcff;
      border-radius: 50%;
      top: 4vw;
      z-index: 1;
    }
    
    .roof-body {
        
      position: absolute;
      top: 5vw;
      right: 0;
      width: 8vw;
      height: 3vw;
      background: linear-gradient(#a6a9c2, #f7fcff);
    }
    
    .bottom-roof {
        
      position: absolute;
      bottom: 0;
      right: 0;
    }
    
    .bottom-roof .tile {
        
      transform: rotate(45deg) translate(0vw, -4.5vw);
      height: 4vw;
      width: 0.7vw;
    }

$(function() {
        
      function numberRandom(max, min) {
        
        var num = ( Math.random() * ( max - min ) + min ).toFixed( 2 )
        return num;
      }
    
      // 孔明灯
      for (let index = 0; index < 15; index++) {
        
        let left = document.createElement('div');
        left.className = 'latern-left';
    
        let right = document.createElement('div');
        right.className = 'latern-right';
    
        let bottom = document.createElement('div');
        bottom.className = 'latern-bottom';
    
        let kongMing = document.createElement('div');
        kongMing.className = 'kongming-latern-litle';
        kongMing.style =
          'left:' +
            numberRandom(15, 0) +
          'vw; bottom:' +
            numberRandom(-4, -15) +
          'vw; animation: FlyFour ' +
            numberRandom(20, 15) +
          's linear infinite; animation-delay:' +
            numberRandom(15, 1) +
          's;';
    
        kongMing.appendChild(left);
        kongMing.appendChild(right);
        kongMing.appendChild(bottom);
        document.getElementById('latern').appendChild(kongMing);
      }
    
      // 星星
      for (let index = 0; index < 100; index++) {
        
        let star = document.createElement('div');
        star.className = 'star';
        star.style = 'left: ' +
          numberRandom(15, 0) +
        'vw; top: ' +
          numberRandom(45, 0) +
        'vh; animation-delay: ' +
          numberRandom(60, 0) +
        's; animation: Wink ' +
          numberRandom(60, 0) +
        's linear infinite;';
    
        document.getElementById('sky').appendChild(star);
      }
    
      // 上屋檐
      let yMultiple = 1.3;
      for (let index = 0; index < 7; index++) {
        
        let tile = document.createElement('div');
        tile.className = 'tile';
        tile.style = 'transform: rotate(45deg) translate(' +
            ((index + 1) * 0.6 - 4) +
          'vw, ' +
            (8 - (index + yMultiple)) +
          'vw); height: ' + 
            (1.5 + (index + 1) * 0.7) +
          'vw;';
        yMultiple += 0.4;
        document.getElementById('topRoof').appendChild(tile);
    
        let edge = document.createElement('div');
        edge.className = 'edge';
        edge.style = 'right: ' + (9.1 - (index + 1) * 1.2) + 'vw;';
        document.getElementById('topRoof').appendChild(edge);
      }
    
      // 下屋檐
      for (let index = 0; index < 18; index++) {
        
        let tile = document.createElement('div');
        tile.className = 'tile';
        tile.style = 'right: ' +
            (2 + index * 0.98) +
          'vw;';
        document.getElementById('bottomRoof').appendChild(tile);
      }
    })