程序员过中秋
作者：楠羽
- 2022 年 8 月 23 日 浙江
本文字数：5768 字
阅读完需：约 19 分钟
程序员的中秋
八月的夜，有点寒，凄凄的月色透过纱窗，无力地落到床前，淡淡的一片白，又给我带来了一个不眠之夜。明知无人与之同乐，只好由自己的思绪在夜色里游荡。好在白天闲来时，习惯于捡拾树荫底下那一片片破碎的阳光，放到口袋里，留到晚上寂寞时，用来温暖自己的心。
很久以前，曾一度热情，用年轻的心去图划未来，那份执着的追求，曾有过不少的亮点，虽然在商海里留下了伤痕，在爱海里，留下了伤痛，但内心仍然藏着一丝丝的自豪，那是因为曾经尽力搏击，曾经拥有那份含恨的爱。随着月圆月缺，那份热情早已当做古玩收藏于心底，爱已消亡。如洁的月光，现在看来已经变得冷漠，节日的气氛更加撩起诸多的痛。我愿带着一片宁静去寻找属于自己的世界，在哪里安然地细品人生。
然而，如今那一片宁静也已经变得飘渺，商化的社会，到处一片沸腾。或许，宁静需要自己去体会，需要一个历练的过程，没有豁达的胸怀和顽强的意志，那一片宁静将从身边飘走。
多年以来，从不敢贸然尝试一口中秋之月，只是怕，孤单只影的我坏了团聚的味道，不忍心把好好的一个园咬缺，然后独自把它吞并。多么的希望，你我一起把它掰开，分成两半，放到各自的身体里，无论你在哪里，你我永远都是一个园。
这样的夜，思绪在寂虑中仿佛脱体狂奔，却理不成形。孩时的童影，学时的同窗，一起挣食的友人，亲人，还有已经走远的先辈们都堆积在一起，这种抹不去的印记像雾一样缭绕，禁不住一番感慨，多么的想，寻回我来时的起点，从新品味每每的月圆月缺。 岁月的足迹渐行渐远，已不必为生活的沧桑添加太多言语，往事如焉，爱亦然，恨亦然，人生也亦然。
秋又起，屋外的树，偶有落叶沙沙，那是为了来年的新生，我是否也能再度扬帆？直到现在，还迷茫。我想，趁着这夜色，悄悄地，在床前这淡淡的一片白里，画上几笔色彩，添上几句心语，捎到这片白的另一端，为我解开心中的结。
程序员过中秋
在代码的世界里过中秋，用代码表达对亲人的爱意。纪这个浓重的日子。
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); }})
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 3
楠羽
关注
还未添加个人签名 2022.08.04 加入
还未添加个人简介
评论