【猿创征文】| web前端html写一个动态中秋明月！祝福大家中秋快乐！

📚前言

📑博客主页：@丘比特惩罚陆

💖欢迎关注：点赞收藏⭐留言✒
💬系列专栏：web前端、嵌入式、笔记专栏
🎮 加入社区：灌水乐园
🥇人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

👏 希望大家能小手一动，帮忙点个赞！

😁资源邮箱：2237814512@qq.com；微信：lss0901lili1130

🌔本篇主题：中秋节给女朋友弄一个中秋主题的代码网页，由于被迫异地，一个南宁，一个四川绵阳！但愿人长久千里共婵娟！我们隔月相望，小陆这给上自己的祝福！！！

📚前言

🗓中秋简述

🗓中秋简述

中秋节，是我们国家的四大传统节日之一！中秋节有很多的别称，有祭月节、月光诞、月夕、秋节、仲秋节、拜月节等等，仲秋节源自于天象崇拜，有上古时代秋夕祭月演变而来。中华求解中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。

中秋节起源于上古时代，普及于汉代，定型于唐朝初年，盛行于宋朝以后。中秋节是秋季时令习俗的综合，其所包含的节俗因素，大都有古老的渊源。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。

最初“祭月节”的节期是在干支历二十四节气“秋分”这天，后来才调至夏历八月十五日。中秋节与春节、清明节、端午节并称为中国四大传统节日。受中华文化的影响，中秋节也是东亚和东南亚一些国家尤其是当地的华人华侨的传统节日。 2006年5月20日，国务院将其列入首批国家级非物质文化遗产名录。自2008年起中秋节被列为国家法定节假日。今年的中秋放假时间是从9月10日到12日一共三天。本文案参考于百度百科！

✨成果展示

成品主要分成四大部分：

一轮动态的明月；
一朵飞翔的祥云；
一片闪光的星空；
一个发光的祝福语！

整体的效果已经在上面显示出来，下面再进行逐个的功能的介绍！再进行逐个功能介绍之前，在这里说明一下，此作品是小编为自己的女朋友制作的一个中秋节礼物，因为相隔1440公里的异地，距离相隔远了，但是心没有远！一个在南宁，一个在四川绵阳，在这里祝福女朋友天天开心，事事顺心，希望能一直陪着你过每一个节日！但愿人长久，千里共婵娟！提前祝福莉宝中秋快乐！能读到此篇的读友，中秋快乐，阖家团圆！

🌕 一轮明月千里共--明月部分

先画一个静态的月亮，用html就可以了，没必要使用vue框架什么的，你看完后，你会发现没有你想象的那么难，静态明月的代码：


<body>
    <div class="moon">div>
body>
   
<style>
html,body {
height: 100% ;
margin: 0;
padding: 0;
    }
    body {
        background-color: #111;
    }
    .moon {
        position: absolute;
        z-index: 1;
        width: 120px;
        height: 120px;
        background-image: linear-gradient(to right,#e4e0b7 10%,#fff 90%);
        box-shadow: 0 0 60px 40px rgba(0,0,255,0.2),inset 0 0 20px 5px rgba(0,0,255,0.1);
        border-radius: 50%;
        filter: blur(2px);
        animation: moon-move 200s linear infinite alternate;
    }
style>

效果展示：

接下来，将静态的明月变成动态的明月，我们只需要在我们的样式代码后面添加明月移动起来的样式修饰，代码如下：


<style>    @keyframes moon-move {
        0% {
            left: 10%;
            top: 20%;
        }
        25% {
            left: 30%;
            top: 18%;
        }
        50% {
            left: 48%;
            top: 15%;
        }
        75% {
            left: 68%;
            top: 18%;
        }
        100% {
            left: 85%;
            top: 20%;
        }
    }
style>

效果展示：

🌟 众星捧月--星空部分

首先我们使用的是一个画布，新建一个画布，将画布设置为定位，设置画布的位置高度，样式中设置画布为基于最底部的样式，在将画布的背景设置一下就好了。这部分的代码：


	
    <canvas id="starfield">
    canvas>
<style>
 
canvas{
	position:fixed;/*设置定位*/
	top:0;
	left:0;
	z-index:-1;/*使画布基于最低层*/
	background:#0e1729;/*画布背景色*/
}
 
style>

这一部分的效果如下：

再后，在script里面设置画布的属性已经进行我们星空的初始化，用数组接收存放数组存放随机生成的星星数据（x,y,大小，颜色，速度），以及stars_count用于设置星星数量，context设置为2d展示的效果。


function ini(){
    canvas = document.getElementById("starfield");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");
    stars = Array();
    stars_count = 300;
    clearInterval(interval);
}

在设置一个函数，设置的是随机生成的星星的数据，将这一些数据（生成的2星星的数据存放到一个数组里面），


function makeStars(){
    for(var i=0;i
    {
        let x=Math.random() * canvas.offsetWidth;
        let y = Math.random() * canvas.offsetHeight;
        let radius = Math.random()*0.8;
        let color="rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
        let speed=Math.random()*0.5;
        let arr={'x':x,'y':y,'radius':radius,'color':color,'speed':speed};
        stars.push(arr);
    }
}

最后，就是将你生成的星星画在画布上面，还是写一个函数，设置星星画在画布上面，在稍微的在窗口大小发生变化的时候重新随机生成星星的数据。


function drawStars(){//把星星画到画布上
    context.fillStyle = "#0e1729";
    context.fillRect(0,0,canvas.width,canvas.height);
    for (var i = 0; i < stars.length; i++) {
        var x = stars[i]['x'] - stars[i]['speed'];
        if(x<-2*stars[i]['radius']) x=canvas.width;
        stars[i]['x']=x;
        var y = stars[i]['y'];
        var radius = stars[i]['radius'];
        context.beginPath();
        context.arc(x, y, radius*2, 0, 2*Math.PI);
        context.fillStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
        context.fill();
    }
}
 
window.onresize = function(){//窗口大小发生变化时重新随机生成星星数据
    ini();
    makeStars();
    interval=setInterval(function(){drawStars();},50);
}

好了，到这一部分的话，我们就已经设置好了星空部分的效果图，我们结合起来，我们看一下到这一步的效果应该是这样的：

我们的星空是动态的，这里就不使用GIF动图演示了，结果是成功就可以了！

🌥 遥云望月 --云朵部分

做着一部分的时候觉得是最头大的，因为从来没有写过这样的东西，因为你看嘛，一朵云，不规则，参看了蛮多的资料，终于捣鼓出来了，还是很有趣的，然后回头一看表示原来没有自己想象的name高大上，也没有那么难。我们看操作：


   
    <div class="cloud">
        <div class="cloud-item cloud-base">div>
        <div class="cloud-item cloud-min">div>
        <div class="cloud-item cloud-front">div>
        <svg width="0" height="0">
            <filter id="filter-base">
                <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="5" 
                seed="8517"/>
                <feDisplacementMap in="SourceGraphic" scale="120"/>
            filter>
            <filter id="filter-mid">
                <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="3" 
                seed="8517"/>
                <feDisplacementMap in="SourceGraphic" scale="120"/>
            filter>
            <filter id="filter-front">
                <feTurbulence type="fractalNoise" baseFrequency="0.009" numOctaves="4" 
                seed="8517"/>
                <feDisplacementMap in="SourceGraphic" scale="50"/>
            filter>
        svg>
    div>
 
.cloud {
    position: fixed;
    z-index: 2;
    top: 10%;
    animation: cloud-move 60s linear infinite;
    transform: translate3d(0,0,0);
}
.cloud-item {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 600px;
    height: 100px;
    border-radius: 50%;
}
.cloud-base {
    top: 90px;
    left: 100px;
    filter: url(#filter-base);
    box-shadow: 210px 170px 19px 40px rgba(255,255,255,0.9);
}
.cloud-min {
    top: -80px;
    width: 580px;
    height: 35px;
    filter: url(#filter-min);
    box-shadow: 210px 250px 28px 30px rgba(66,105,146,0.2);
}
.cloud-front {
    top: 70px;          
    width: 450px;
    height: 40px;
    left: -20px;
    filter: url(#filter-front);
    box-shadow: 210px 272px 30 px 30px rgba(66,105,146,0.4);
}

我们到这里得到了一个静态的云朵，我们可以看一下效果：

大家如果喜欢动态的云朵的话，我们可以在script样式里面将云朵动起来的属性加起来，我们稍微就可以将云朵动起来就可以了！代码如下：


   
//云朵动起来的代码
 @keyframes cloud-move {
        from {
 
            left: -700px;
        }
        to {
left: -100%;
        }
    }

效果展示：

📜祝福框部分

这个祝福语我们就弄一个新奇一点的，我们可以弄一个发光的字体部分，毕竟中秋嘛！还有的就是女孩子嘛，都喜欢光光亮亮的东西，所以还是很有必要的，毕竟我女朋友就是这样的小公主！

我们直接上代码就好了，大家需要的自己家伙是加上去就好了：


 
DOCTYPE html>
<html lang="zh">
<head>
<title>title>
 
head>
<body>
<div class="ziti">
	<div class="ziti_box">但愿人长久，千里共婵娟。莉宝中秋快乐！！！Mua!!!爱你(｡･ω･｡)ﾉ♡div>
div>
	
<script src="js/jquery-1.11.0.min.js" type="text/javascript">script>
<script type="text/javascript" src="js/neon_text.js">script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.second_neon').neonText({
			textColor:'white',
			textSize:'40pt',
			neonHighlight:'white',
			neonHighlightColor:'#008000',
			neonHighlightHover:'#FFFF00',
			neonFontHover:'white'
		});
	});
script>
 
<div style="text-align:center;clear:both;padding-top:50px">
<script src="/gg_bd_ad_720x90.js" type="text/javascript">script>
<script src="/follow.js" type="text/javascript">script>
div>
 
body>
html>
<style>
    body, html { font-size: 100%; 	padding: 0; margin: 0;}
 
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
 
.clearfix:after {
	clear: both;
}
 
body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "宋体";
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.zzsc-container{
	margin: 0 auto;
}
.ziti{
	width: 900px;
	margin: 30px auto;
}
body {
    background: none repeat scroll 0 0 #000000;
}
 
.ziti_box {
    border: 1px solid;
    border-radius: 10px;
    color: #FFFFFF;
    cursor: pointer;
    display: table-cell;
    float: right;
    font-family:"Zeyada";
    margin-left: 20px;
	transition: text-shadow 0.5s ease 0s;
    padding: 45px 25px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #008000, 0 0 70px #008000, 0 0 80px #008000, 0 0 100px #008000;
    width: 270px;
}
.ziti_box:hover {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFF00, 0 0 70px #FFFF00, 0 0 80px #FFFF00, 0 0 100px #FFFF00;
}
 
style>

我们加上去后的效果就是如下，我们可以看一下；

效果展示：

📝 总体效果

我们再看一遍最终的效果展示吧！觉得挺浪漫的，看起来还不错，在这里就先提前祝福我异地恋的女朋友中秋快乐！我很喜欢你，虽然我俩现在是异地恋，没办法的事，因为工作分配的地方不一样，距离边远了，但是我俩会永远在一起的！我会好好地保护你的！也提前祝福大家中秋快乐！阖家团圆！

📔 完整代码

完整的代码关注私聊！！！哈哈哈！！！

相关阅读:
【rhce考试时间是每年什么时候呢？】
Spring-IOC 控制反转
 spring boot 整合 itextpdf 导出 PDF，写入大文本，写入HTML代码，分析当下导出PDF的几个工具
 vue报错sockjs-node/info?t=或者报错info?t=
Typescript学习
 Java算法（三）：判断两个数组是否为相等 → （要求：长度、顺序、元素）相等
 全网最全谷粒商城记录_07、环境-虚拟机网络设置——2、固定IP，Windows和虚拟机ping通方式【简洁】
模拟实现Hash-Table(线性探测)
华为数据治理实践
 PostgreSQL 15新版本特性解读（含直播问答、PPT资料汇总）
原文地址：https://blog.csdn.net/Lushengshi/article/details/126693431