Inmediatamente, el Festival del Medio Otoño está llegando nuevamente.Si se sigue el ritmo de años anteriores, los programadores de front-end pueden apresurarse a hacer páginas temáticas del Festival del Medio Otoño.
Hoy, me gustaría aprovechar esta oportunidad para compartir con ustedes un código que usa HTML puro + CSS + Javascript para crear una página web con el tema del Festival del Medio Otoño. Utiliza la propiedad de animación de cuadros de CSS para controlar la animación de transición de la imagen. Al mismo tiempo, use el script JS para controlar el número y la posición inicial de las linternas Kongming. El efecto es el siguiente:
El código fuente es el siguiente
Cree un nuevo index.htmlarchivo y complete lo siguiente:
<!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>
Cree un nuevo index.cssarchivo y complete lo siguiente:
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;
}
Finalmente, crea un nuevo index.jsarchivo con el siguiente contenido:
$(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);
}
})
Luego, puede ejecutarlo en su navegador. ¡Ve y pruébalo!