2023春节祝福系列第一弹（下）

（放飞祈福孔明灯，祝福大家身体健康）

（附完整源代码及资源免费下载）

四、画一朵真实的祥云

（1）、画一个渐变的白色径向渐变背景

（2）、应用一个SVG feTurbulence滤镜

（3）、调整细节

（4）、思路扩展

（5）、云朵飘动起来

（6）、SVG的feTurbulence滤镜语法解释

五、循环上升的祝福孔明灯

（1）、效果图

（2）、相关代码

六、一个发光的祝福语显示框

（1）、效果图

（2）、相关代码

（3）、border-style语法解释

七、关于孔明灯的诗词

八、完整源代码及资源下载

四、画一朵真实的祥云

　　云朵的效果图如下：

画一朵真实的祥云方法：

1、画一个白色的径向渐变背景（语法参考：https://blog.csdn.net/weixin_69553582/article/details/128581968#t8），

2、应用一个SVG feTurbulence滤镜

3、调整细节，效果就出来了。

具体操作我们一起看看吧：

(1)、画一个渐变的白色径向渐变背景

“画一朵真实的祥云”这部分相关的css代码：

        .cloud {width: 200px;height: 175px;background: radial-gradient(closest-side, #fff 20%, #fffa 60%, #fff0 95%);position: absolute;}

“画一朵真实的祥云”这部分相关的html调用代码：

<div class="cloud"></div>

（2）、应用一个SVG feTurbulence滤镜

“画一朵真实的祥云”这部分相关的html调用代码：

    <svg width="0" height="0"><filter id="cloudRandom"><feTurbulence type="fractalNoise" baseFrequency="0.013" numOctaves="4" seed="0" /><feDisplacementMap in="SourceGraphic" scale="180" /></filter></svg>

在.cloud部分增加调用滤镜代码：

filter: url(#cloudRandom1);

（3）、调整细节

　　因为是晚上的云朵效果，亮度不会太高，我们可以设置一下css部分的不透明度：

opacity: 0.3;

　　通过调整相关的各种参数，我们可以组合成各种不同形状的云朵，白天的云朵和晚上的云朵在视觉上有所不同，需要按实际应用环境调试，具体大家可以自己动手试试。我这里举例生成的云朵是适合本篇主题“放飞祈福孔明灯”的。

（4）、思路扩展

　　实现同一个效果的方法有很多种，除了径向渐变背景，我们可以用 box-shadow来达到同样效果。需要注意的是，所使用的方法不同，应用同一个参数的SVG feTurbulence滤镜，画出来的云朵形状会有所不同。

“画一朵真实的祥云”相关代码如下所示：

css代码：

#cloud-circle {width: 200px;height: 175px;border-radius: 50%;filter: url(#cloudRandom);box-shadow: 400px 400px 60px 0px #fff;position: absolute;top: -320px;left: -320px;opacity: 0.4;transform: translate3d(0,0,0);
}

html调用代码：

    <div id="cloud-circle"></div><svg width="0" height="0"><filter id="cloudRandom"><feTurbulence type="fractalNoise" baseFrequency="0.013" numOctaves="4" seed="0" /><feDisplacementMap in="SourceGraphic" scale="180" /></filter></svg>

（5）、云朵飘动起来

　　我们让云朵飘动起来，方法是加上css动画代码。个人提议：云朵飘动过程中不是一成不变的，我们可以在这个过程中加上渐隐效果，这样处理的云朵视觉效果会更好。

“让云朵飘动起来”这部分css代码：

在云朵的css定义部分加上：

animation: cloud-move 60s linear infinite;

新增css动画代码：

@keyframes cloud-move {from {left: 100%;}to {left: 0%;opacity: 0.1;}
}

（6）、SVG的feTurbulence滤镜语法解释

SVG的feTurbulence滤镜
　　在SVG中，feTurbulence滤镜就可以利用Perlin噪声算法函数创建丰富的图像。使用feTurbulence滤镜的时候，我们可以通过调整参数直观地看到效果，

SVG的feTurbulence滤镜五个参数

baseFrequency	（默认值：0） baseFrequency基频率属性可以接受两个值，这两个值分别会当成x轴和y轴上的基础频率，由此，我们可以生成在某一个方向拉伸的噪声。
numOctaves	（默认值：1） numOctaves八度数 numOctaves只接受不等于0的正整数。当我们设置了这个属性之后，算法会在原来的噪声函数上叠加若干个频率不同的他自己，形成细节更加丰富的噪声
stitchTiles	（默认值：noStitch） stitchTiles需要使用多个图形时才能发挥效果，当我们随便设置两个使用feTurbulence滤镜的图形放在一起的时候，这两个图形的边界会出来断层的现象。但是有时候，我们需要让两个图形看起来像从一个连续的集合分开。这个时候就可以将滤镜的stitchTiles属性设置成stitch，图形的边界就会连续起来。
type	（默认值：turbulence） type属性把位于同一个子集的两个功能合并在一个滤镜里， type的取值是turbulence和fractalNoise分形噪声。 turbulence是指将柏林函数进行合成时，只取函数的绝对值，合成后的函数在0处不可导，其图像会有一些尖锐效果，形似湍流。 fractalNoise则是在原来的噪声中叠加白噪声，让最终的结果呈现出高斯模糊的效果。简单来说两个的区别是有没有模糊。通常水流设置type属性值为turbulence类型，云雾都是设置值为fractalNoise。
seed	（默认值：0） seed是种子的意思，这是每一个随机数算法都需要用到的一个输入，所有的伪随机数算法中，当输入的种子一样的时候，输出总是一致的。

五、循环上升的祝福孔明灯

（1）、效果图

（2）、相关代码

“循环上升的祝福孔明灯”这部分html调用代码：

        <div class="kmd" id="kmd"><div class="kongmingdeng"><div class="kmdleft"> </div><div class="kmdright"> </div><div class="kmdbottom"> </div></div><div class="kongmingdeng-little"><div class="kmdleft"> </div><div class="kmdright"> </div><div class="kmdbottom"> </div></div></div>

“循环上升的祝福孔明灯”这部分相关的css代码：

.kmd {width: 100%;
}.kongmingdeng, .kongmingdeng-little {position: absolute;height: 5.1vw;width: 3.5vw;bottom: -8vw;background: linear-gradient(#92090e, #ea3d2d, #fbf885);animation: FlyOne 24s linear infinite;
}.kmdleft {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;
}.kmdright {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;
}.kmdbottom {position: relative;top: 3vw;width: 3.5vw;height: 1.2vw;background: radial-gradient(#fff, #fbf885, #ea3d2d);border-radius: 5vw;
}.kongmingdeng {z-index: 2;
}.kongmingdeng:nth-child(2), .kongmingdeng:nth-child(3) {animation: FlyThree 18s linear infinite;animation-delay: 6s;height: 3.7vw;left: 5vw;width: 2.5vw;bottom: -10vw;}.kongmingdeng:nth-child(2) {bottom: -7vw;left: 2vw;animation: FlyTwo 16s linear infinite;animation-delay: 2s;}.kongmingdeng:nth-child(2) .kmdleft, .kongmingdeng:nth-child(3) .kmdleft {border-left: 3vw solid transparent;top: 1.5vw;left: -2.4vw;}.kongmingdeng:nth-child(2) .kmdright, .kongmingdeng:nth-child(3) .kmdright {border-right: 3vw solid transparent;top: 0.6vw;left: 0.9vw;}.kongmingdeng:nth-child(2) .kmdbottom, .kongmingdeng:nth-child(3) .kmdbottom {top: 1.6vw;height: 1vw;width: 2.5vw;}.kongmingdeng-little {height: 2vw;left: 5vw;width: 1.2vw;bottom: 5vw;animation: FlyFour 18s linear infinite;
}.kongmingdeng-little .kmdleft {border-left: 1.7vw solid transparent;border-right: 0.3vw solid transparent;border-bottom: 0.5vw solid #ea4c35;top: 0.75vw;left: -1.2vw;}.kongmingdeng-little .kmdright {border-left: 0.3vw solid transparent;border-right: 1.7vw solid transparent;border-bottom: 0.5vw solid #ea4c35;top: 0.26vw;left: 0.4vw;}.kongmingdeng-little .kmdbottom {top: 0.6vw;width: 1.2vw;height: 0.5vw;}@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(7vw) translateY(-30vh) rotate(0deg);opacity: 1;}40% {transform: translateX(1vw) translateY(-60vh) rotate(8deg);opacity: 0.9;}70% {transform: translateX(9vw) translateY(-80vh) rotate(-8deg);opacity: 0.8;}100% {transform: translateX(18vw) translateY(-100vh) rotate(3deg);opacity: 0.1;}
}@keyframes FlyFour {100% {transform: translateY(-100vh);opacity: 0.8;}
}

“循环上升的祝福孔明灯”这部分的js代码：

$(function () {function numberRandom(max, min) {var num = (Math.random() * (max - min) + min).toFixed(2)return num;}for (let index = 0; index < 20; index++) {let left = document.createElement('div');left.className = 'kmdleft';let right = document.createElement('div');right.className = 'kmdright';let bottom = document.createElement('div');bottom.className = 'kmdbottom';let kongMing = document.createElement('div');kongMing.className = 'kongmingdeng';kongMing.style ='width:' + numberRandom() +'%;' +'left:' +numberRandom(150, 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('kmd').appendChild(kongMing);}})$(function () {function numberRandom(max, min) {var num = (Math.random() * (max - min) + min).toFixed(2)return num;}for (let index1 = 0; index1 < 25; index1++) {let left1 = document.createElement('div');left1.className = 'kmdleft';let right1 = document.createElement('div');right1.className = 'kmdright';let bottom1 = document.createElement('div');bottom1.className = 'kmdbottom';let kongMing1 = document.createElement('div');kongMing1.className = 'kongmingdeng-little';kongMing1.style ='left:' +numberRandom(150, 0) +'vw; bottom:' +numberRandom(-4, -15) +'vw; animation: FlyThree ' +numberRandom(20, 15) +'s linear infinite; animation-delay:' +numberRandom(15, 1) +'s;';kongMing1.appendChild(left1);kongMing1.appendChild(right1);kongMing1.appendChild(bottom1);document.getElementById('kmd').appendChild(kongMing1);}})

六、一个发光的祝福语显示框

（1）、效果图

（2）、相关代码

“一个发光的祝福语显示框”这部分相应的css定义代码：

        .zhufu {width: 900px;margin: 30px auto;}.zhufu_box {z-index: 5;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;margin-top: 20px;text-align: center;text-shadow: 0 0 15px #000000, 0 0 20px #000d24, 0 0 30px #000d24, 0 0 40px #0043b2, 0 0 60px #0043b2, 0 0 50px #0043b2, 0 0 20px #ffffff;width: 270px;border-style: dotted solid double dashed;}.zhufu_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;}

“一个发光的祝福语显示框”这部分相应的html 代码：

        <div class="zhufu"><div class="zhufu_box">2023年春节祝福第一弹<br /><br />放飞祈福孔明灯<br />祝福大家身体健康！<br /><br />孔明灯，又称许愿灯，孔明灯现在多作为祈福之用。民间有许多地方的风俗就是在重要日子放孔明灯以求平安!<br /><br />2023年即将到来，许下新年的愿望，让我们借着祈福孔明灯的光去寻找新的路途，心愿随孔明灯飘向遥远的星空，那会是夜空中最闪亮的星星，点点星光，与满天繁星无分彼此，也将祝福带到世界各地，祝福大家2023年身体健康！</div></div>

祝福文字修改时，只需替换掉<div class="zhufu_box"></div>这部分内的中文文字即可。本篇第七部分收集了一些有关“孔明灯”的古诗，如果需要使用，可作参考。

（3）、border-style语法解释

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

属性	效果
border-style:dotted solid double dashed; 上边框是点状右边框是实线下边框是双线左边框是虚线

border-style:dotted solid double; 上边框是点状右边框和左边框是实线下边框是双线

border-style:dotted solid; 上边框和下边框是点状右边框和左边框是实线

border-style:dashed; 定义虚线。在大多数浏览器中呈现为实线。

border-style:dotted; 定义点状边框。所有4个边框都是点状在大多数浏览器中呈现为实线。

border-style:solid; 定义实线。

border-style:double; 定义双线。双线的宽度等于 border-width 的值。

border: 10px groove; 定义 3D 凹槽边框。

border: 10px ridge; 定义 3D 垄状边框。

border: 10px inset; 定义 3D inset 边框。

border-style:outset; 定义 3D outset 边框。其效果取决于 border-color 的值。

border-style:inherit; 规定应该从父元素继承边框样式。

border-style:none; 定义无边框。

border-style:hidden; 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

七、关于孔明灯的诗词

有关“孔明灯”的古诗

1、《七律·孔明灯》佚名

月沉碧海望重楼，谁放明灯惹梦游。

鹑火星稀萤点点，北辰途远雁啾啾。

人间每寄千般愿，天帝难平万种愁。

借问飘摇风送处，今宵热泪未东流？

2、《鹧鸪天》宋·晏几道

彩袖殷勤捧玉钟，当年拚却醉颜红。舞低杨柳楼心月，歌尽桃花扇底风。

从别后，忆相逢，几回魂梦与君同。今宵剩把银釭照，犹恐相逢是梦中。

3、《孔明灯》当代·戴宁东

满覆祈祷惧自沉，灼骨燃心尽自焚。

飞离地面三万尺，凌霄可否见龙城。

4、《孔明灯》佚名

八舟暮栖兰潮万，月明稀星落清科。

初秋叶落江波涨，玖盏微灯照岸停。

5、《咏孔明灯》当代·张志真

放飞理想与心愿，美好愿望升高空。

除夕元宵喜庆夜，当防天火再发生。

八、完整源代码及资源下载

需要打包好的完整源代码及资源压缩包的，点击下面链接下载。（我设的是免费）

2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）完整源代码及资源下载

完整html代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><meta name="description" content="逆境清醒2023年春节祝福代码系列(1)"><meta name="description1" content="逆境清醒https://blog.csdn.net/weixin_69553582?type=lately"><meta name="keywords" content="逆境清醒,2023年,春节祝福"><title>2023年春节祝福第一弹---放飞孔明灯祝福大家身体健康！</title><script src="js/jquery-3.6.3.min.js"></script><script type="text/javascript" src="js/2023web1.js"></script><link rel="stylesheet" href="css/2023web1.css" type="text/css"></link><body><div class="stars"></div><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 id="cloud-circle"></div><svg width="0" height="0"><filter id="filter"><feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" /><feDisplacementMap in="SourceGraphic" scale="180" /></filter></svg><div id="cloud-circle1"></div><svg width="0" height="0"><filter id="filter1"><feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="10" /><feDisplacementMap in="SourceGraphic" scale="120" /></filter></svg><div class="kmd" id="kmd"><div class="kongmingdeng"><div class="kmdleft"> </div><div class="kmdright"> </div><div class="kmdbottom"> </div></div><div class="kongmingdeng-little"><div class="kmdleft"> </div><div class="kmdright"> </div><div class="kmdbottom"> </div></div></div><div class="zhufu"><div class="zhufu_box">2023年春节祝福第一弹<br /><br />放飞祈福孔明灯<br />祝福大家身体健康！<br /><br />孔明灯，又称许愿灯，孔明灯现在多作为祈福之用。民间有许多地方的风俗就是在重要日子放孔明灯以求平安!<br /><br />2023年即将到来，许下新年的愿望，让我们借着祈福孔明灯的光去寻找新的路途，心愿随孔明灯飘向遥远的星空，那会是夜空中最闪亮的星星，点点星光，与满天繁星无分彼此，也将祝福带到世界各地，祝福大家2023年身体健康！</div></div></body>
</html>

完整css代码：


body {background: radial-gradient(220% 105% at top center, #01040d 30%, #0043b2 60%, #e96f92 85%, #ca5631);background-attachment: fixed;overflow: hidden;margin: 0;height: 100%;width: 100%;
}@keyframes rotate {0% {transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);}100% {transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);}
}.stars {transform: perspective(500px);transform-style: preserve-3d;position: absolute;bottom: 0;perspective-origin: 50% 100%;left: 50%;animation: rotate 90s infinite linear;
}.star {width: 2px;height: 2px;background: #F7F7B6;position: absolute;top: 0;left: 0;transform-origin: 0 0 -300px;transform: translate3d(0, 0, -300px);backface-visibility: hidden;
}.moon {position: absolute;z-index: -1;width: 100px;height: 100px;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;
}.moon-shadow {width: 3vw;height: 5vw;border-radius: 100%;position: absolute;top: 1vw;left: 2.6vw;background: linear-gradient(51deg, #e4e0b7, #e4e0b7, #eae895, #feff7f, #fefec6);
}#moonShadow {filter: url(#filter);
}@keyframes moon-move {0% {left: 10%;top: 30%;}50% {left: 68%;top: 20%;}75% {left: 88%;top: 15%;}100% {left: 95%;top: 10%;}
}#cloud-circle {width: 200px;height: 175px;border-radius: 50%;filter: url(#filter);box-shadow: 400px 400px 60px 0px #fff;position: absolute;top: -320px;left: -320px;opacity: 0.4;animation: cloud-move 60s linear infinite;transform: translate3d(0,0,0);
}@keyframes cloud-move {from {left: 100%;}to {left: 0%;opacity: 0.1;}
}.cloud {width: 200px;height: 200px;filter: url(#cloudRandom);background-image: radial-gradient(closest-side, #fff 20%, #fffa 60%, #fff0 90%);
}#cloud-circle1 {width: 200px;height: 75px;border-radius: 50%;filter: url(#filter1);box-shadow: 400px 400px 60px 0px #fff;position: absolute;top: -220px;right: -120px;opacity: 0.6;animation: cloud-move1 60s linear infinite;transform: translate3d(0,0,0);
}@keyframes cloud-move1 {from {right: 100%;}to {right: 0%;opacity: 0.1;}
}.kmd {width: 100%;
}.kongmingdeng, .kongmingdeng-little {position: absolute;height: 5.1vw;width: 3.5vw;bottom: -8vw;background: linear-gradient(#92090e, #ea3d2d, #fbf885);animation: FlyOne 24s linear infinite;
}.kmdleft {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;
}.kmdright {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;
}.kmdbottom {position: relative;top: 3vw;width: 3.5vw;height: 1.2vw;background: radial-gradient(#fff, #fbf885, #ea3d2d);border-radius: 5vw;
}.kongmingdeng {z-index: 2;
}.kongmingdeng:nth-child(2), .kongmingdeng:nth-child(3) {animation: FlyThree 18s linear infinite;animation-delay: 6s;height: 3.7vw;left: 5vw;width: 2.5vw;bottom: -10vw;}.kongmingdeng:nth-child(2) {bottom: -7vw;left: 2vw;animation: FlyTwo 16s linear infinite;animation-delay: 2s;}.kongmingdeng:nth-child(2) .kmdleft, .kongmingdeng:nth-child(3) .kmdleft {border-left: 3vw solid transparent;top: 1.5vw;left: -2.4vw;}.kongmingdeng:nth-child(2) .kmdright, .kongmingdeng:nth-child(3) .kmdright {border-right: 3vw solid transparent;top: 0.6vw;left: 0.9vw;}.kongmingdeng:nth-child(2) .kmdbottom, .kongmingdeng:nth-child(3) .kmdbottom {top: 1.6vw;height: 1vw;width: 2.5vw;}.kongmingdeng-little {height: 2vw;left: 5vw;width: 1.2vw;bottom: 5vw;animation: FlyFour 18s linear infinite;
}.kongmingdeng-little .kmdleft {border-left: 1.7vw solid transparent;border-right: 0.3vw solid transparent;border-bottom: 0.5vw solid #ea4c35;top: 0.75vw;left: -1.2vw;}.kongmingdeng-little .kmdright {border-left: 0.3vw solid transparent;border-right: 1.7vw solid transparent;border-bottom: 0.5vw solid #ea4c35;top: 0.26vw;left: 0.4vw;}.kongmingdeng-little .kmdbottom {top: 0.6vw;width: 1.2vw;height: 0.5vw;}@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(7vw) translateY(-30vh) rotate(0deg);opacity: 1;}40% {transform: translateX(1vw) translateY(-60vh) rotate(8deg);opacity: 0.9;}70% {transform: translateX(9vw) translateY(-80vh) rotate(-8deg);opacity: 0.8;}100% {transform: translateX(18vw) translateY(-100vh) rotate(3deg);opacity: 0.1;}
}@keyframes FlyFour {100% {transform: translateY(-100vh);opacity: 0.8;}
}.zhufu {width: 900px;margin: 30px auto;
}.zhufu_box {z-index: 5;//border: 1px solid;border-style: double;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;margin-top: 20px;text-align: center;text-shadow: 0 0 15px #000000, 0 0 20px #000d24, 0 0 30px #000d24, 0 0 40px #0043b2, 0 0 60px #0043b2, 0 0 50px #0043b2, 0 0 20px #ffffff;width: 270px;
}.zhufu_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;}

完整js代码：

    $(document).ready(function () {var stars = 800;var $stars = $(".stars");var r = 800;for (var i = 0; i < stars; i++) {var $star = $("<div />").addClass("star");$stars.append($star);}$(".star").each(function () {var cur = $(this);var s = 0.2 + (Math.random() * 1);var curR = r + (Math.random() * 300);cur.css({transformOrigin: "0 0 " + curR + "px",transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")"})})})$(function () {function numberRandom(max, min) {var num = (Math.random() * (max - min) + min).toFixed(2)return num;}for (let index = 0; index < 20; index++) {let left = document.createElement('div');left.className = 'kmdleft';let right = document.createElement('div');right.className = 'kmdright';let bottom = document.createElement('div');bottom.className = 'kmdbottom';let kongMing = document.createElement('div');kongMing.className = 'kongmingdeng';kongMing.style ='width:' + numberRandom() +'%;' +'left:' +numberRandom(150, 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('kmd').appendChild(kongMing);}})$(function () {function numberRandom(max, min) {var num = (Math.random() * (max - min) + min).toFixed(2)return num;}for (let index1 = 0; index1 < 25; index1++) {let left1 = document.createElement('div');left1.className = 'kmdleft';let right1 = document.createElement('div');right1.className = 'kmdright';let bottom1 = document.createElement('div');bottom1.className = 'kmdbottom';let kongMing1 = document.createElement('div');kongMing1.className = 'kongmingdeng-little';kongMing1.style ='left:' +numberRandom(150, 0) +'vw; bottom:' +numberRandom(-4, -15) +'vw; animation: FlyThree ' +numberRandom(20, 15) +'s linear infinite; animation-delay:' +numberRandom(15, 1) +'s;';kongMing1.appendChild(left1);kongMing1.appendChild(right1);kongMing1.appendChild(bottom1);document.getElementById('kmd').appendChild(kongMing1);}})

2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）

2023春节祝福系列第一弹（放飞孔明灯为所有人祈福，祝福大家身体健康）

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你

推荐阅读：


27		原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。
26		2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子
25		2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21		python爱心源代码集锦
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)
18		草莓熊python turtle绘图（玫瑰花版）附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图（电力球版）附源代码
15		【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14		草莓熊python turtle绘图（风车版）附源代码
13		用代码过中秋，python海龟月饼你要不要尝一口？
12		《 Python List 列表全实例详解系列》__系列总目录
11		用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查（28种，全）
8		手机屏幕坏了____怎么把里面的资料导出（18种方法）
7		2023年1月多家权威机构____编程语言排行榜__薪酬状况
6		Python中Print()函数的用法___实例详解(全，例多）
5		色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3		Tomcat 启动闪退问题解决集（八大类详细）
2		Tomcat端口配置（详细）
1		Tomcat10 安装（Windows环境）（详细）