首页 前端知识 程序员的中秋节

程序员的中秋节

2024-03-09 09:03:01 前端知识 前端哥 186 446 我要收藏

程序员的中秋

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

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

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

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

​ 这样的夜,思绪在寂虑中仿佛脱体狂奔,却理不成形。孩时的童影,学时的同窗,一起挣食的友人,亲人,还有已经走远的先辈们都堆积在一起,这种抹不去的印记像雾一样缭绕,禁不住一番感慨,多么的想,寻回我来时的起点,从新品味每每的月圆月缺。  

岁月的足迹渐行渐远,已不必为生活的沧桑添加太多言语,往事如焉,爱亦然,恨亦然,人生也亦然。

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

程序员过中秋

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

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;
}

js

$(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);
  }
})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3477.html
标签
评论
发布的文章

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!