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

雨点打透心脏的1/2处 2024-03-30 16:14 19阅读 0赞

##  ##

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

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

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

**目录**

四、画一朵真实的祥云

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

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

（3）、调整细节

（4）、思路扩展

（5）、云朵飘动起来

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

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

（1）、效果图

（2）、相关代码

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

（1）、效果图

（2）、相关代码

（3）、border-style语法解释

七、关于孔明灯的诗词

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

--------------------

## 四、画一朵真实的祥云 ##

云朵的效果图如下：

![c68a4de454504f5d9050718539def9ca.png][]

画一朵真实的祥云方法：

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

2、应用一个SVG feTurbulence滤镜

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

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

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

![d27bb7f35de446f4b158e6b08fb7916c.png][]

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

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

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

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

![bc8e8edb7f5c4f5ea0a9f62ba61361ee.png][]

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

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

> filter: url(\#cloudRandom1);

### （3）、调整细节 ###

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

> opacity: 0.3;

![ee29ac2a46534fdb9c8e0a93d130b5dc.png][]

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

### （4）、思路扩展 ###

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

![f0c5d74856a5495088d4543490a7db2f.png][]

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

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调用代码：

### （5）、云朵飘动起来 ###

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

![8fdba03dc28640ceb807f8a205d2e161.gif][]

“让云朵飘动起来”这部分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滤镜的时候，我们可以通过调整参数直观地看到效果，

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

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

### （1）、效果图 ###

![62bd613369844eaf8c54da58941837de.gif][]

### （2）、相关代码 ###

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

“循环上升的祝福孔明灯”这部分相关的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）、效果图 ###

![f11c03e8dd1e4ad49d3e8b5ae1fb8868.gif][]

### （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属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#99ccff;text-align:center;width:253px;">属性</td> 
   <td style="background-color:#99ccff;text-align:center;width:294px;">效果</td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:dotted solid double dashed;</strong></p> <p></p> <p style="margin-left:0;text-align:justify;">上边框是点状</p> <p style="margin-left:0;text-align:justify;">右边框是实线</p> <p style="margin-left:0;text-align:justify;">下边框是双线</p> <p style="margin-left:0;text-align:justify;">左边框是虚线</p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/38bf2fc6c9214b678787d4ccd984ac85.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:dotted solid double;</strong></p> <p></p> <p style="margin-left:0;text-align:justify;">上边框是点状</p> <p style="margin-left:0;text-align:justify;">右边框和左边框是实线</p> <p style="margin-left:0;text-align:justify;">下边框是双线</p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/3c38d27a1e3a4d1c86703fad429dfd5f.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:dotted solid;</strong></p> <p></p> <p style="margin-left:0;text-align:justify;">上边框和下边框是点状</p> <p style="margin-left:0;text-align:justify;">右边框和左边框是实线</p> <p></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/22154e8a8e8147ddac96219727e47b55.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">dashed</span>;</strong></p> <p></p> <p><span style="color:#333333;">定义虚线。</span></p> <p><span style="color:#333333;">在大多数浏览器中呈现为实线。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/4b0225932e984c86961d1242b72ee213.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:dotted;</strong></p> <p></p> <p><span style="color:#333333;">定义点状边框。</span></p> <p>所有4个边框都是点状</p> <p><span style="color:#333333;">在大多数浏览器中呈现为实线。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/723283a12ac94f278a6e541c2fb3e7a3.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">solid</span>;</strong></p> <p></p> <p><span style="color:#333333;">定义实线。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/15bd13d99b3648769570bec3af5ab2f4.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">double</span>;</strong></p> <p></p> <p><span style="color:#333333;">定义双线。</span></p> <p><span style="color:#333333;">双线的宽度等于</span><span style="color:#333333;"> border-width </span><span style="color:#333333;">的值。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/250d56692efa4a7ca3d2d214ea1a8892.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border: 10px groove;</strong></p> <p></p> <p><span style="color:#333333;">定义</span><span style="color:#333333;"> 3D </span><span style="color:#333333;">凹槽边框。</span></p> <p></p> </td> 
   <td style="width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/d316242d97c04df1992932320544efbe.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border: 10px ridge;</strong></p> <p></p> <p><span style="color:#333333;">定义</span><span style="color:#333333;"> 3D </span><span style="color:#333333;">垄状边框。</span></p> <p></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/c66d43009a1944689dfb8afde60b7968.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border: 10px inset;</strong></p> <p></p> <p><span style="color:#333333;">定义</span><span style="color:#333333;"> 3D inset </span><span style="color:#333333;">边框。</span></p> <p></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/ba70b40b95dd4e7a8ed250ffb7f0bea4.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">outset</span>;</strong></p> <p></p> <p><span style="color:#333333;">定义</span><span style="color:#333333;"> 3D outset </span><span style="color:#333333;">边框。</span></p> <p><span style="color:#333333;">其效果取决于</span><span style="color:#333333;"> border-color </span><span style="color:#333333;">的值。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/816b50e85987402a91c5b5801147f880.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">inherit</span>;</strong></p> <p><span style="color:#333333;">规定应该从父元素继承边框样式。</span></p> </td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p><strong>border-style:<span style="color:#333333;">none</span>;</strong></p> <p><span style="color:#333333;">定义无边框。</span></p> </td> 
   <td style="text-align:center;width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/e768a537596d4a119d3a0d1cf6a49ae4.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"> <p>border-style:<span style="color:#333333;">hidden</span>;</p> <p><span style="color:#333333;">与</span><span style="color:#333333;"> "none" </span><span style="color:#333333;">相同。</span></p> <p><span style="color:#333333;">不过应用于表时除外，对于表，</span><span style="color:#333333;">hidden </span><span style="color:#333333;">用于解决边框冲突。</span></p> </td> 
   <td style="width:294px;"> <p><img alt="" src="https://img-blog.csdnimg.cn/e768a537596d4a119d3a0d1cf6a49ae4.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
  <tr> 
   <td style="width:253px;"></td> 
   <td style="width:294px;"></td> 
  </tr> 
 </tbody> 
</table>

## 七、关于孔明灯的诗词 ##

有关“孔明灯”的古诗

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

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

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

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

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

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

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

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

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

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

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

4、《孔明灯》佚名

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

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

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

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

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

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

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

[2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）完整源代码及资源下载][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);
                }
            })

![b885ddae308c4121993c12040e9822fe.gif][][2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）][2023 1]

> ![5fbb17651a4242e1beecf64f00f044a4.gif][]
> 
> 1.  [2023春节祝福系列第一弹（放飞孔明灯为所有人祈福，祝福大家身体健康）][2023 1]
> 2.  [2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你][2023 2]
> 3.

**推荐阅读：**

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>27</td> 
   <td><img alt="" src="https://img-blog.csdnimg.cn/bba02a1c4617422c9fbccbf5325850d9.png"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128999468" title="原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。" rel="nofollow">原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。</a></p> </td> 
  </tr> 
  <tr> 
   <td>26</td> 
   <td> <p><img alt="" height="140" src="https://img-blog.csdnimg.cn/fea225cb9ec14b60b2d1b797dd8278a2.png" width="250"></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128699908" title="2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子" rel="nofollow">2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子</a></td> 
  </tr> 
  <tr> 
   <td>25</td> 
   <td> <p><img alt="" height="140" src="https://img-blog.csdnimg.cn/1f53fb9c6e8b4482813326affe6a82ff.png" width="250"></p> <p></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128581968" title="2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）" rel="nofollow">2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）</a></td> 
  </tr> 
  <tr> 
   <td>24</td> 
   <td> <p><img alt="" height="140" src="https://img-blog.csdnimg.cn/6176c4061c72430eb100750af6fc4d0e.png" width="250"></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128425770?spm=1001.2014.3001.5502" title="HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)" rel="nofollow">HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)</a></p> </td> 
  </tr> 
  <tr> 
   <td>23</td> 
   <td> <p><img alt="" height="140" src="https://img-blog.csdnimg.cn/17b403c4307c4141b8544d02f95ea06c.png" width="250"></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128368639" title="草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码" rel="nofollow">草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>22</td> 
   <td> <p><img alt="" height="140" src="https://img-blog.csdnimg.cn/5d409c8f397a45c986ca2af7b7e725c9.png" width="250"></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128296176" title="【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）" rel="nofollow">【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）</a></p> </td> 
  </tr> 
  <tr> 
   <td>21</td> 
   <td> <p><img alt="0a4256d5e96d4624bdca36433237080b.png" height="140" src="https://img-blog.csdnimg.cn/0a4256d5e96d4624bdca36433237080b.png" width="250"></p> <p></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/127941542" title="python爱心源代码集锦" rel="nofollow">python爱心源代码集锦</a></td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td> <p><img alt="4d9032c9cdf54f5f9193e45e4532898c.png" height="140" src="https://img-blog.csdnimg.cn/4d9032c9cdf54f5f9193e45e4532898c.png" width="250"></p> <p></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128141522" title="巴斯光年python turtle绘图__附源代码" rel="nofollow">巴斯光年python turtle绘图__附源代码</a></td> 
  </tr> 
  <tr> 
   <td>19</td> 
   <td> <p><img alt="074cd3c255224c5aa21ff18fdc25053c.png" height="140" src="https://img-blog.csdnimg.cn/074cd3c255224c5aa21ff18fdc25053c.png" width="250"></p> <p></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/128015962" title="Three.js实例详解___旋转的精灵女孩(附完整代码和资源)" rel="nofollow">Three.js实例详解___旋转的精灵女孩(附完整代码和资源)</a></td> 
  </tr> 
  <tr> 
   <td>18</td> 
   <td> <p><img alt="daecd7067e7c45abb875fc7a1a469f23.png" height="140" src="https://img-blog.csdnimg.cn/daecd7067e7c45abb875fc7a1a469f23.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799077?spm=1001.2014.3001.5501" title="草莓熊python turtle绘图（玫瑰花版）附源代码" rel="nofollow">草莓熊python turtle绘图（玫瑰花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td> <p><img alt="fe88b78e78694570bf2d850ce83b1f69.png" height="140" src="https://img-blog.csdnimg.cn/fe88b78e78694570bf2d850ce83b1f69.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799004" title="立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦" rel="nofollow">立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦</a></p> </td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td> <p><img alt="c5feeb25880d49c085b808bf4e041c86.png" height="140" src="https://img-blog.csdnimg.cn/c5feeb25880d49c085b808bf4e041c86.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127505979" title="皮卡丘python turtle海龟绘图（电力球版）附源代码" rel="nofollow">皮卡丘python turtle海龟绘图（电力球版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>15</td> 
   <td> <p><img alt="38266b5036414624875447abd5311e4d.png" height="140" src="https://img-blog.csdnimg.cn/38266b5036414624875447abd5311e4d.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127582251" title="【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)" rel="nofollow">【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)</a></p> </td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td> <p><img alt="03ed644f9b1d411ba41c59e0a5bdcc61.png" height="140" src="https://img-blog.csdnimg.cn/03ed644f9b1d411ba41c59e0a5bdcc61.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127131591" title="草莓熊python turtle绘图（风车版）附源代码" rel="nofollow">草莓熊python turtle绘图（风车版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td> <p><img alt="09e08f86f127431cbfdfe395aa2f8bc9.png" height="140" src="https://img-blog.csdnimg.cn/09e08f86f127431cbfdfe395aa2f8bc9.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126624379" title="用代码过中秋，python海龟月饼你要不要尝一口？" rel="nofollow">用代码过中秋，python海龟月饼你要不要尝一口？</a></p> </td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td> <p><img alt="40e8b4631e2b486bab2a4ebb5bc9f410.png" height="140" src="https://img-blog.csdnimg.cn/40e8b4631e2b486bab2a4ebb5bc9f410.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126365799" title="《 Python List 列表全实例详解系列》__系列总目录" rel="nofollow">《 Python List 列表全实例详解系列》__系列总目录</a></p> </td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td> <p><img alt="938bc5a8bb454a41bfe0d4185da845dc.jpeg" height="140" src="https://img-blog.csdnimg.cn/938bc5a8bb454a41bfe0d4185da845dc.jpeg" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126110424" title="用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）" rel="nofollow">用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）</a></p> </td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td> <p><img alt="0f09e73712d149ff90f0048a096596c6.png" height="140" src="https://img-blog.csdnimg.cn/0f09e73712d149ff90f0048a096596c6.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126006585" title="Python函数方法实例详解全集(更新中...)" rel="nofollow">Python函数方法实例详解全集(更新中...)</a></p> </td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td> <p><img alt="93d65dbd09604c4a8ed2c01df0eebc38.png" height="140" src="https://img-blog.csdnimg.cn/93d65dbd09604c4a8ed2c01df0eebc38.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125986622" title="matplotlib 自带绘图样式效果展示速查（28种，全）" rel="nofollow">matplotlib 自带绘图样式效果展示速查（28种，全）</a></p> </td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td> <p><img alt="aa17177aec9b4e5eb19b5d9675302de8.png" height="140" src="https://img-blog.csdnimg.cn/aa17177aec9b4e5eb19b5d9675302de8.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125776190" title="手机屏幕坏了____怎么把里面的资料导出（18种方法）" rel="nofollow">手机屏幕坏了____怎么把里面的资料导出（18种方法）</a></p> </td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td> <p><img alt="1750390dd9da4b39938a23ab447c6fb6.jpeg" height="140" src="https://img-blog.csdnimg.cn/1750390dd9da4b39938a23ab447c6fb6.jpeg" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125532836" title="2023年6月多家权威机构____编程语言排行榜__薪酬状况" rel="nofollow">2023年6月多家权威机构____编程语言排行榜__薪酬状况</a></p> </td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td> <p><img alt="dc8796ddccbf4aec98ac5d3e09001348.jpeg" height="171" src="https://img-blog.csdnimg.cn/dc8796ddccbf4aec98ac5d3e09001348.jpeg" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125403845" title="Python中Print()函数的用法___实例详解(全，例多）" rel="nofollow">Python中Print()函数的用法___实例详解(全，例多）</a></p> </td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td> <p><img alt="1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" height="171" src="https://img-blog.csdnimg.cn/1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125289540" title="色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)" rel="nofollow">色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)</a></p> </td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td> <p><img alt="80007dbf51944725bf9cf4cfc75c5a13.png" height="140" src="https://img-blog.csdnimg.cn/80007dbf51944725bf9cf4cfc75c5a13.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124966437" title="Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）" rel="nofollow">Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td> <p><img alt="c6374d75c29942f2aa577ce9c5c2e12b.png" height="171" src="https://img-blog.csdnimg.cn/c6374d75c29942f2aa577ce9c5c2e12b.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893550" title="Tomcat 启动闪退问题解决集（八大类详细）" rel="nofollow">Tomcat 启动闪退问题解决集（八大类详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td> <p><img alt="5218ac5338014f389c21bdf1bfa1c599.png" height="171" src="https://img-blog.csdnimg.cn/5218ac5338014f389c21bdf1bfa1c599.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893517" title="Tomcat端口配置（详细）" rel="nofollow">Tomcat端口配置（详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td> <p><img alt="fffa2098008b4dc68c00a172f67c538d.png" height="171" src="https://img-blog.csdnimg.cn/fffa2098008b4dc68c00a172f67c538d.png" width="250"></p> <p></p> </td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124845408" title="Tomcat10 安装（Windows环境）（详细）" rel="nofollow">Tomcat10 安装（Windows环境）（详细）</a></p> </td> 
  </tr> 
 </tbody> 
</table>

[c68a4de454504f5d9050718539def9ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/251a493668884a98b372b7cda08b58e8.png
[d27bb7f35de446f4b158e6b08fb7916c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2301a8a941f849d7954d16979169a853.png
[bc8e8edb7f5c4f5ea0a9f62ba61361ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/877f2364d2924f0994df072346c2f188.png
[ee29ac2a46534fdb9c8e0a93d130b5dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7d1a1a3345b7430d94d3a29e12b6dca8.png
[f0c5d74856a5495088d4543490a7db2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b5cde0e84fde474cb0b0caf4a36b748f.png
[8fdba03dc28640ceb807f8a205d2e161.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fb7492107e754221a363e334be1885a6.gif
[62bd613369844eaf8c54da58941837de.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8f1dce6f77b6459c9a506a7ed2ae9409.gif
[f11c03e8dd1e4ad49d3e8b5ae1fb8868.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/17cca07e70db4e1a84e49f42e2b501ab.gif
[2023]: https://download.csdn.net/download/weixin_69553582/87376559
[b885ddae308c4121993c12040e9822fe.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/42a76904748e4f2288888f687b9f4a92.gif
[2023 1]: https://blog.csdn.net/weixin_69553582/article/details/128581968
[5fbb17651a4242e1beecf64f00f044a4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bc29d86f8e384bd59c1d0019b771487c.gif
[2023 2]: https://blog.csdn.net/weixin_69553582/article/details/128699908