前端程序员的中秋节中秋节，送你千盏孔明灯，万家灯火故事长
Posted 前端修罗场
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端程序员的中秋节中秋节，送你千盏孔明灯，万家灯火故事长相关的知识，希望对你有一定的参考价值。
马上，中秋又要来了，如果按照往年的节奏，这会前端程序员或许正在赶着制作中秋主题的页面。
今天，借此机会，和大家分享一个使用纯 html + CSS + javascript 制作中秋主题网页的代码。它使用到了 CSS 的帧动画属性控制图片的过渡动画。同时，使用 JS 脚本控制孔明灯的数量，初始位置。效果如下：
源码如下
新建 index.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>中秋孔明</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>
新建 index.css 文件，填入如下内容：
html,
body
margin: 0;
height: 100%;
body
background: linear-gradient(-180deg, #041039, #418cbc, #fff);
@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;
left: 50%;
transform: translate(-50%);
width: 35vw;
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;
最后，新建 index.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 l以上是关于前端程序员的中秋节中秋节，送你千盏孔明灯，万家灯火故事长的主要内容，如果未能解决你的问题，请参考以下文章