• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
逆境清醒
帮助5

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代码:

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

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

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

(2)、应用一个SVG feTurbulence滤镜

学新通

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

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

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

             filter: url(#cloudRandom1);

(3)、调整细节

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

opacity: 0.3;

学新通

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

学新通

学新通

 (4)、思路扩展

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

学新通

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

css代码:

  1.  
    #cloud-circle {
  2.  
    width: 200px;
  3.  
    height: 175px;
  4.  
    border-radius: 50%;
  5.  
    filter: url(#cloudRandom);
  6.  
    box-shadow: 400px 400px 60px 0px #fff;
  7.  
    position: absolute;
  8.  
    top: -320px;
  9.  
    left: -320px;
  10.  
    opacity: 0.4;
  11.  
    transform: translate3d(0,0,0);
  12.  
    }
  13.  
     

html调用代码:

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

(5)、云朵飘动起来

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

学新通

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

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

animation: cloud-move 60s linear infinite;

 新增css动画代码:

  1.  
    @keyframes cloud-move {
  2.  
    from {
  3.  
    left: 100%;
  4.  
    }
  5.  
     
  6.  
    to {
  7.  
    left: 0%;
  8.  
    opacity: 0.1;
  9.  
    }
  10.  
    }

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

  1.  
    <div class="kmd" id="kmd">
  2.  
    <div class="kongmingdeng">
  3.  
    <div class="kmdleft"> </div>
  4.  
    <div class="kmdright"> </div>
  5.  
    <div class="kmdbottom"> </div>
  6.  
    </div>
  7.  
     
  8.  
    <div class="kongmingdeng-little">
  9.  
    <div class="kmdleft"> </div>
  10.  
    <div class="kmdright"> </div>
  11.  
    <div class="kmdbottom"> </div>
  12.  
    </div>
  13.  
    </div>

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

  1.  
    .kmd {
  2.  
    width: 100%;
  3.  
    }
  4.  
     
  5.  
     
  6.  
    .kongmingdeng, .kongmingdeng-little {
  7.  
    position: absolute;
  8.  
    height: 5.1vw;
  9.  
    width: 3.5vw;
  10.  
    bottom: -8vw;
  11.  
    background: linear-gradient(#92090e, #ea3d2d, #fbf885);
  12.  
    animation: FlyOne 24s linear infinite;
  13.  
    }
  14.  
     
  15.  
     
  16.  
    .kmdleft {
  17.  
    border-left: 5vw solid transparent;
  18.  
    border-right: 1vw solid transparent;
  19.  
    border-bottom: 0.9vw solid #ea4c35;
  20.  
    transform: rotate(-90deg);
  21.  
    position: relative;
  22.  
    top: 2.5vw;
  23.  
    left: -3.4vw;
  24.  
    }
  25.  
     
  26.  
    .kmdright {
  27.  
    border-left: 1vw solid transparent;
  28.  
    border-right: 5vw solid transparent;
  29.  
    border-bottom: 0.9vw solid #ea4c35;
  30.  
    transform: rotate(90deg);
  31.  
    position: relative;
  32.  
    top: 1.6vw;
  33.  
    left: 0.9vw;
  34.  
    }
  35.  
     
  36.  
    .kmdbottom {
  37.  
    position: relative;
  38.  
    top: 3vw;
  39.  
    width: 3.5vw;
  40.  
    height: 1.2vw;
  41.  
    background: radial-gradient(#fff, #fbf885, #ea3d2d);
  42.  
    border-radius: 5vw;
  43.  
    }
  44.  
     
  45.  
    .kongmingdeng {
  46.  
    z-index: 2;
  47.  
    }
  48.  
     
  49.  
    .kongmingdeng:nth-child(2), .kongmingdeng:nth-child(3) {
  50.  
    animation: FlyThree 18s linear infinite;
  51.  
    animation-delay: 6s;
  52.  
    height: 3.7vw;
  53.  
    left: 5vw;
  54.  
    width: 2.5vw;
  55.  
    bottom: -10vw;
  56.  
    }
  57.  
     
  58.  
    .kongmingdeng:nth-child(2) {
  59.  
    bottom: -7vw;
  60.  
    left: 2vw;
  61.  
    animation: FlyTwo 16s linear infinite;
  62.  
    animation-delay: 2s;
  63.  
    }
  64.  
     
  65.  
    .kongmingdeng:nth-child(2) .kmdleft, .kongmingdeng:nth-child(3) .kmdleft {
  66.  
    border-left: 3vw solid transparent;
  67.  
    top: 1.5vw;
  68.  
    left: -2.4vw;
  69.  
    }
  70.  
     
  71.  
    .kongmingdeng:nth-child(2) .kmdright, .kongmingdeng:nth-child(3) .kmdright {
  72.  
    border-right: 3vw solid transparent;
  73.  
    top: 0.6vw;
  74.  
    left: 0.9vw;
  75.  
    }
  76.  
     
  77.  
    .kongmingdeng:nth-child(2) .kmdbottom, .kongmingdeng:nth-child(3) .kmdbottom {
  78.  
    top: 1.6vw;
  79.  
    height: 1vw;
  80.  
    width: 2.5vw;
  81.  
    }
  82.  
     
  83.  
    .kongmingdeng-little {
  84.  
    height: 2vw;
  85.  
    left: 5vw;
  86.  
    width: 1.2vw;
  87.  
    bottom: 5vw;
  88.  
    animation: FlyFour 18s linear infinite;
  89.  
    }
  90.  
     
  91.  
    .kongmingdeng-little .kmdleft {
  92.  
    border-left: 1.7vw solid transparent;
  93.  
    border-right: 0.3vw solid transparent;
  94.  
    border-bottom: 0.5vw solid #ea4c35;
  95.  
    top: 0.75vw;
  96.  
    left: -1.2vw;
  97.  
    }
  98.  
     
  99.  
    .kongmingdeng-little .kmdright {
  100.  
    border-left: 0.3vw solid transparent;
  101.  
    border-right: 1.7vw solid transparent;
  102.  
    border-bottom: 0.5vw solid #ea4c35;
  103.  
    top: 0.26vw;
  104.  
    left: 0.4vw;
  105.  
    }
  106.  
     
  107.  
    .kongmingdeng-little .kmdbottom {
  108.  
    top: 0.6vw;
  109.  
    width: 1.2vw;
  110.  
    height: 0.5vw;
  111.  
    }
  112.  
     
  113.  
    @keyframes FlyOne {
  114.  
    10% {
  115.  
    transform: translateX(7vw) translateY(-10vh) rotate(0deg);
  116.  
    }
  117.  
     
  118.  
    40% {
  119.  
    transform: translateX(2vw) translateY(-30vh) rotate(5deg);
  120.  
    }
  121.  
     
  122.  
    70% {
  123.  
    transform: translateX(10vw) translateY(-70vh) rotate(-5deg);
  124.  
    }
  125.  
     
  126.  
    100% {
  127.  
    transform: translateX(3vw) translateY(-120vh) rotate(3deg);
  128.  
    }
  129.  
    }
  130.  
     
  131.  
    @keyframes FlyTwo {
  132.  
    10% {
  133.  
    transform: translateX(2vw) translateY(-15vh) rotate(0deg);
  134.  
    }
  135.  
     
  136.  
    40% {
  137.  
    transform: translateX(10vw) translateY(-60vh) rotate(5deg);
  138.  
    }
  139.  
     
  140.  
    70% {
  141.  
    transform: translateX(3vw) translateY(-90vh) rotate(-5deg);
  142.  
    }
  143.  
     
  144.  
    100% {
  145.  
    transform: translateX(12vw) translateY(-100vh) rotate(3deg);
  146.  
    opacity: 0.1;
  147.  
    }
  148.  
    }
  149.  
     
  150.  
    @keyframes FlyThree {
  151.  
    10% {
  152.  
    transform: translateX(7vw) translateY(-30vh) rotate(0deg);
  153.  
    opacity: 1;
  154.  
    }
  155.  
     
  156.  
    40% {
  157.  
    transform: translateX(1vw) translateY(-60vh) rotate(8deg);
  158.  
    opacity: 0.9;
  159.  
    }
  160.  
     
  161.  
    70% {
  162.  
    transform: translateX(9vw) translateY(-80vh) rotate(-8deg);
  163.  
    opacity: 0.8;
  164.  
    }
  165.  
     
  166.  
    100% {
  167.  
    transform: translateX(18vw) translateY(-100vh) rotate(3deg);
  168.  
    opacity: 0.1;
  169.  
    }
  170.  
    }
  171.  
     
  172.  
    @keyframes FlyFour {
  173.  
    100% {
  174.  
    transform: translateY(-100vh);
  175.  
    opacity: 0.8;
  176.  
    }
  177.  
    }
学新通

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

  1.  
     
  2.  
    $(function () {
  3.  
    function numberRandom(max, min) {
  4.  
    var num = (Math.random() * (max - min) min).toFixed(2)
  5.  
    return num;
  6.  
    }
  7.  
     
  8.  
    for (let index = 0; index < 20; index ) {
  9.  
    let left = document.createElement('div');
  10.  
    left.className = 'kmdleft';
  11.  
     
  12.  
    let right = document.createElement('div');
  13.  
    right.className = 'kmdright';
  14.  
     
  15.  
    let bottom = document.createElement('div');
  16.  
    bottom.className = 'kmdbottom';
  17.  
     
  18.  
    let kongMing = document.createElement('div');
  19.  
     
  20.  
    kongMing.className = 'kongmingdeng';
  21.  
    kongMing.style =
  22.  
    'width:' numberRandom()
  23.  
    '%;'
  24.  
    'left:'
  25.  
    numberRandom(150, 0)
  26.  
    'vw; bottom:'
  27.  
    numberRandom(-4, -15)
  28.  
    'vw; animation: FlyFour '
  29.  
    numberRandom(20, 15)
  30.  
    's linear infinite; animation-delay:'
  31.  
    numberRandom(15, 1)
  32.  
    's;';
  33.  
     
  34.  
    kongMing.appendChild(left);
  35.  
    kongMing.appendChild(right);
  36.  
    kongMing.appendChild(bottom);
  37.  
    document.getElementById('kmd').appendChild(kongMing);
  38.  
    }
  39.  
    })
  40.  
     
  41.  
    $(function () {
  42.  
    function numberRandom(max, min) {
  43.  
    var num = (Math.random() * (max - min) min).toFixed(2)
  44.  
    return num;
  45.  
    }
  46.  
     
  47.  
     
  48.  
    for (let index1 = 0; index1 < 25; index1 ) {
  49.  
    let left1 = document.createElement('div');
  50.  
    left1.className = 'kmdleft';
  51.  
     
  52.  
    let right1 = document.createElement('div');
  53.  
    right1.className = 'kmdright';
  54.  
     
  55.  
    let bottom1 = document.createElement('div');
  56.  
    bottom1.className = 'kmdbottom';
  57.  
     
  58.  
    let kongMing1 = document.createElement('div');
  59.  
    kongMing1.className = 'kongmingdeng-little';
  60.  
     
  61.  
    kongMing1.style =
  62.  
    'left:'
  63.  
    numberRandom(150, 0)
  64.  
    'vw; bottom:'
  65.  
    numberRandom(-4, -15)
  66.  
    'vw; animation: FlyThree '
  67.  
    numberRandom(20, 15)
  68.  
    's linear infinite; animation-delay:'
  69.  
    numberRandom(15, 1)
  70.  
    's;';
  71.  
     
  72.  
    kongMing1.appendChild(left1);
  73.  
    kongMing1.appendChild(right1);
  74.  
    kongMing1.appendChild(bottom1);
  75.  
    document.getElementById('kmd').appendChild(kongMing1);
  76.  
    }
  77.  
    })
学新通

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

(1)、效果图

学新通

(2)、相关代码

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

  1.  
    .zhufu {
  2.  
    width: 900px;
  3.  
    margin: 30px auto;
  4.  
    }
  5.  
     
  6.  
    .zhufu_box {
  7.  
    z-index: 5;
  8.  
    border-radius: 10px;
  9.  
    color: #FFFFFF;
  10.  
    cursor: pointer;
  11.  
    display: table-cell;
  12.  
    float: right;
  13.  
    font-family: "Zeyada";
  14.  
    margin-left: 20px;
  15.  
    transition: text-shadow 0.5s ease 0s;
  16.  
    padding: 45px 25px;
  17.  
    margin-top: 20px;
  18.  
    text-align: center;
  19.  
    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;
  20.  
    width: 270px;
  21.  
    border-style: dotted solid double dashed;
  22.  
     
  23.  
    }
  24.  
     
  25.  
    .zhufu_box:hover {
  26.  
    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;
  27.  
    }
学新通

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

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

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta charset="utf-8" />
  5.  
    <meta name="description" content="逆境清醒2023年春节祝福代码系列(1)">
  6.  
    <meta name="description1" content="逆境清醒https://blog.csdn.net/weixin_69553582?type=lately">
  7.  
    <meta name="keywords" content="逆境清醒,2023年,春节祝福">
  8.  
    <title>2023年春节祝福第一弹---放飞孔明灯祝福大家身体健康!</title>
  9.  
    <script src="js/jquery-3.6.3.min.js"></script>
  10.  
    <script type="text/javascript" src="js/2023web1.js"></script>
  11.  
    <link rel="stylesheet" href="css/2023web1.css" type="text/css"></link>
  12.  
    <body>
  13.  
    <div class="stars"></div>
  14.  
    <div class="moon">
  15.  
    <div class="moon-shadow" id="moonShadow"></div>
  16.  
    <svg width="0" height="0">
  17.  
    <filter id="filter">
  18.  
    <feTurbulence type="fractalNoise" baseFrequency="0.034" numOctaves="4" seed="0" />
  19.  
    <feDisplacementMap in="SourceGraphic" scale="150" />
  20.  
    </filter>
  21.  
    </svg>
  22.  
    </div>
  23.  
     
  24.  
     
  25.  
    <div id="cloud-circle"></div>
  26.  
    <svg width="0" height="0">
  27.  
    <filter id="filter">
  28.  
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
  29.  
    <feDisplacementMap in="SourceGraphic" scale="180" />
  30.  
    </filter>
  31.  
    </svg>
  32.  
    <div id="cloud-circle1"></div>
  33.  
    <svg width="0" height="0">
  34.  
    <filter id="filter1">
  35.  
    <feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="10" />
  36.  
    <feDisplacementMap in="SourceGraphic" scale="120" />
  37.  
    </filter>
  38.  
    </svg>
  39.  
     
  40.  
     
  41.  
    <div class="kmd" id="kmd">
  42.  
    <div class="kongmingdeng">
  43.  
    <div class="kmdleft"> </div>
  44.  
    <div class="kmdright"> </div>
  45.  
    <div class="kmdbottom"> </div>
  46.  
    </div>
  47.  
     
  48.  
    <div class="kongmingdeng-little">
  49.  
    <div class="kmdleft"> </div>
  50.  
    <div class="kmdright"> </div>
  51.  
    <div class="kmdbottom"> </div>
  52.  
    </div>
  53.  
    </div>
  54.  
     
  55.  
    <div class="zhufu">
  56.  
    <div class="zhufu_box">
  57.  
    2023年春节祝福第一弹<br /><br />放飞祈福孔明灯<br />祝福大家身体健康!
  58.  
    <br /><br />
  59.  
    孔明灯,又称许愿灯,孔明灯现在多作为祈福之用。民间有许多地方的风俗就是在重要日子放孔明灯以求平安!<br /><br />
  60.  
    2023年即将到来,许下新年的愿望,让我们借着祈福孔明灯的光去寻找新的路途,心愿随孔明灯飘向遥远的星空,那会是夜空中最闪亮的星星,点点星光,与满天繁星无分彼此,也将祝福带到世界各地,祝福大家2023年身体健康!
  61.  
    </div>
  62.  
    </div>
  63.  
    </body>
  64.  
    </html>
学新通

完整css代码:

  1.  
     
  2.  
    body {
  3.  
    background: radial-gradient(220% 105% at top center, #01040d 30%, #0043b2 60%, #e96f92 85%, #ca5631);
  4.  
    background-attachment: fixed;
  5.  
    overflow: hidden;
  6.  
    margin: 0;
  7.  
    height: 100%;
  8.  
    width: 100%;
  9.  
    }
  10.  
     
  11.  
    @keyframes rotate {
  12.  
    0% {
  13.  
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  14.  
    }
  15.  
     
  16.  
    100% {
  17.  
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  18.  
    }
  19.  
    }
  20.  
     
  21.  
    .stars {
  22.  
    transform: perspective(500px);
  23.  
    transform-style: preserve-3d;
  24.  
    position: absolute;
  25.  
    bottom: 0;
  26.  
    perspective-origin: 50% 100%;
  27.  
    left: 50%;
  28.  
    animation: rotate 90s infinite linear;
  29.  
    }
  30.  
     
  31.  
    .star {
  32.  
    width: 2px;
  33.  
    height: 2px;
  34.  
    background: #F7F7B6;
  35.  
    position: absolute;
  36.  
    top: 0;
  37.  
    left: 0;
  38.  
    transform-origin: 0 0 -300px;
  39.  
    transform: translate3d(0, 0, -300px);
  40.  
    backface-visibility: hidden;
  41.  
    }
  42.  
     
  43.  
    .moon {
  44.  
    position: absolute;
  45.  
    z-index: -1;
  46.  
    width: 100px;
  47.  
    height: 100px;
  48.  
    background-image: linear-gradient(to right,#e4e0b7 10%,#fff 90%);
  49.  
    box-shadow: 0 0 60px 40px rgba(0,0,255,0.2),inset 0 0 20px 5px rgba(0,0,255,0.1);
  50.  
    border-radius: 50%;
  51.  
    filter: blur(2px);
  52.  
    animation: moon-move 200s linear infinite alternate;
  53.  
    }
  54.  
     
  55.  
    .moon-shadow {
  56.  
    width: 3vw;
  57.  
    height: 5vw;
  58.  
    border-radius: 100%;
  59.  
    position: absolute;
  60.  
    top: 1vw;
  61.  
    left: 2.6vw;
  62.  
    background: linear-gradient(51deg, #e4e0b7, #e4e0b7, #eae895, #feff7f, #fefec6);
  63.  
    }
  64.  
     
  65.  
    #moonShadow {
  66.  
    filter: url(#filter);
  67.  
    }
  68.  
     
  69.  
    @keyframes moon-move {
  70.  
    0% {
  71.  
    left: 10%;
  72.  
    top: 30%;
  73.  
    }
  74.  
    50% {
  75.  
    left: 68%;
  76.  
    top: 20%;
  77.  
    }
  78.  
    75% {
  79.  
    left: 88%;
  80.  
    top: 15%;
  81.  
    }
  82.  
    100% {
  83.  
    left: 95%;
  84.  
    top: 10%;
  85.  
    }
  86.  
    }
  87.  
     
  88.  
    #cloud-circle {
  89.  
    width: 200px;
  90.  
    height: 175px;
  91.  
    border-radius: 50%;
  92.  
    filter: url(#filter);
  93.  
    box-shadow: 400px 400px 60px 0px #fff;
  94.  
    position: absolute;
  95.  
    top: -320px;
  96.  
    left: -320px;
  97.  
    opacity: 0.4;
  98.  
    animation: cloud-move 60s linear infinite;
  99.  
    transform: translate3d(0,0,0);
  100.  
    }
  101.  
     
  102.  
    @keyframes cloud-move {
  103.  
    from {
  104.  
    left: 100%;
  105.  
    }
  106.  
     
  107.  
    to {
  108.  
    left: 0%;
  109.  
    opacity: 0.1;
  110.  
    }
  111.  
    }
  112.  
     
  113.  
    .cloud {
  114.  
    width: 200px;
  115.  
    height: 200px;
  116.  
    filter: url(#cloudRandom);
  117.  
    background-image: radial-gradient(closest-side, #fff 20%, #fffa 60%, #fff0 90%);
  118.  
    }
  119.  
     
  120.  
    #cloud-circle1 {
  121.  
    width: 200px;
  122.  
    height: 75px;
  123.  
    border-radius: 50%;
  124.  
    filter: url(#filter1);
  125.  
    box-shadow: 400px 400px 60px 0px #fff;
  126.  
    position: absolute;
  127.  
    top: -220px;
  128.  
    right: -120px;
  129.  
    opacity: 0.6;
  130.  
    animation: cloud-move1 60s linear infinite;
  131.  
    transform: translate3d(0,0,0);
  132.  
    }
  133.  
     
  134.  
    @keyframes cloud-move1 {
  135.  
    from {
  136.  
    right: 100%;
  137.  
    }
  138.  
     
  139.  
    to {
  140.  
    right: 0%;
  141.  
    opacity: 0.1;
  142.  
    }
  143.  
    }
  144.  
     
  145.  
     
  146.  
    .kmd {
  147.  
    width: 100%;
  148.  
    }
  149.  
     
  150.  
     
  151.  
    .kongmingdeng, .kongmingdeng-little {
  152.  
    position: absolute;
  153.  
    height: 5.1vw;
  154.  
    width: 3.5vw;
  155.  
    bottom: -8vw;
  156.  
    background: linear-gradient(#92090e, #ea3d2d, #fbf885);
  157.  
    animation: FlyOne 24s linear infinite;
  158.  
    }
  159.  
     
  160.  
     
  161.  
    .kmdleft {
  162.  
    border-left: 5vw solid transparent;
  163.  
    border-right: 1vw solid transparent;
  164.  
    border-bottom: 0.9vw solid #ea4c35;
  165.  
    transform: rotate(-90deg);
  166.  
    position: relative;
  167.  
    top: 2.5vw;
  168.  
    left: -3.4vw;
  169.  
    }
  170.  
     
  171.  
    .kmdright {
  172.  
    border-left: 1vw solid transparent;
  173.  
    border-right: 5vw solid transparent;
  174.  
    border-bottom: 0.9vw solid #ea4c35;
  175.  
    transform: rotate(90deg);
  176.  
    position: relative;
  177.  
    top: 1.6vw;
  178.  
    left: 0.9vw;
  179.  
    }
  180.  
     
  181.  
    .kmdbottom {
  182.  
    position: relative;
  183.  
    top: 3vw;
  184.  
    width: 3.5vw;
  185.  
    height: 1.2vw;
  186.  
    background: radial-gradient(#fff, #fbf885, #ea3d2d);
  187.  
    border-radius: 5vw;
  188.  
    }
  189.  
     
  190.  
    .kongmingdeng {
  191.  
    z-index: 2;
  192.  
    }
  193.  
     
  194.  
    .kongmingdeng:nth-child(2), .kongmingdeng:nth-child(3) {
  195.  
    animation: FlyThree 18s linear infinite;
  196.  
    animation-delay: 6s;
  197.  
    height: 3.7vw;
  198.  
    left: 5vw;
  199.  
    width: 2.5vw;
  200.  
    bottom: -10vw;
  201.  
    }
  202.  
     
  203.  
    .kongmingdeng:nth-child(2) {
  204.  
    bottom: -7vw;
  205.  
    left: 2vw;
  206.  
    animation: FlyTwo 16s linear infinite;
  207.  
    animation-delay: 2s;
  208.  
    }
  209.  
     
  210.  
    .kongmingdeng:nth-child(2) .kmdleft, .kongmingdeng:nth-child(3) .kmdleft {
  211.  
    border-left: 3vw solid transparent;
  212.  
    top: 1.5vw;
  213.  
    left: -2.4vw;
  214.  
    }
  215.  
     
  216.  
    .kongmingdeng:nth-child(2) .kmdright, .kongmingdeng:nth-child(3) .kmdright {
  217.  
    border-right: 3vw solid transparent;
  218.  
    top: 0.6vw;
  219.  
    left: 0.9vw;
  220.  
    }
  221.  
     
  222.  
    .kongmingdeng:nth-child(2) .kmdbottom, .kongmingdeng:nth-child(3) .kmdbottom {
  223.  
    top: 1.6vw;
  224.  
    height: 1vw;
  225.  
    width: 2.5vw;
  226.  
    }
  227.  
     
  228.  
    .kongmingdeng-little {
  229.  
    height: 2vw;
  230.  
    left: 5vw;
  231.  
    width: 1.2vw;
  232.  
    bottom: 5vw;
  233.  
    animation: FlyFour 18s linear infinite;
  234.  
    }
  235.  
     
  236.  
    .kongmingdeng-little .kmdleft {
  237.  
    border-left: 1.7vw solid transparent;
  238.  
    border-right: 0.3vw solid transparent;
  239.  
    border-bottom: 0.5vw solid #ea4c35;
  240.  
    top: 0.75vw;
  241.  
    left: -1.2vw;
  242.  
    }
  243.  
     
  244.  
    .kongmingdeng-little .kmdright {
  245.  
    border-left: 0.3vw solid transparent;
  246.  
    border-right: 1.7vw solid transparent;
  247.  
    border-bottom: 0.5vw solid #ea4c35;
  248.  
    top: 0.26vw;
  249.  
    left: 0.4vw;
  250.  
    }
  251.  
     
  252.  
    .kongmingdeng-little .kmdbottom {
  253.  
    top: 0.6vw;
  254.  
    width: 1.2vw;
  255.  
    height: 0.5vw;
  256.  
    }
  257.  
     
  258.  
    @keyframes FlyOne {
  259.  
    10% {
  260.  
    transform: translateX(7vw) translateY(-10vh) rotate(0deg);
  261.  
    }
  262.  
     
  263.  
    40% {
  264.  
    transform: translateX(2vw) translateY(-30vh) rotate(5deg);
  265.  
    }
  266.  
     
  267.  
    70% {
  268.  
    transform: translateX(10vw) translateY(-70vh) rotate(-5deg);
  269.  
    }
  270.  
     
  271.  
    100% {
  272.  
    transform: translateX(3vw) translateY(-120vh) rotate(3deg);
  273.  
    }
  274.  
    }
  275.  
     
  276.  
    @keyframes FlyTwo {
  277.  
    10% {
  278.  
    transform: translateX(2vw) translateY(-15vh) rotate(0deg);
  279.  
    }
  280.  
     
  281.  
    40% {
  282.  
    transform: translateX(10vw) translateY(-60vh) rotate(5deg);
  283.  
    }
  284.  
     
  285.  
    70% {
  286.  
    transform: translateX(3vw) translateY(-90vh) rotate(-5deg);
  287.  
    }
  288.  
     
  289.  
    100% {
  290.  
    transform: translateX(12vw) translateY(-100vh) rotate(3deg);
  291.  
    opacity: 0.1;
  292.  
    }
  293.  
    }
  294.  
     
  295.  
    @keyframes FlyThree {
  296.  
    10% {
  297.  
    transform: translateX(7vw) translateY(-30vh) rotate(0deg);
  298.  
    opacity: 1;
  299.  
    }
  300.  
     
  301.  
    40% {
  302.  
    transform: translateX(1vw) translateY(-60vh) rotate(8deg);
  303.  
    opacity: 0.9;
  304.  
    }
  305.  
     
  306.  
    70% {
  307.  
    transform: translateX(9vw) translateY(-80vh) rotate(-8deg);
  308.  
    opacity: 0.8;
  309.  
    }
  310.  
     
  311.  
    100% {
  312.  
    transform: translateX(18vw) translateY(-100vh) rotate(3deg);
  313.  
    opacity: 0.1;
  314.  
    }
  315.  
    }
  316.  
     
  317.  
    @keyframes FlyFour {
  318.  
    100% {
  319.  
    transform: translateY(-100vh);
  320.  
    opacity: 0.8;
  321.  
    }
  322.  
    }
  323.  
     
  324.  
     
  325.  
     
  326.  
    .zhufu {
  327.  
    width: 900px;
  328.  
    margin: 30px auto;
  329.  
    }
  330.  
     
  331.  
    .zhufu_box {
  332.  
    z-index: 5;
  333.  
    //border: 1px solid;
  334.  
    border-style: double;
  335.  
    border-radius: 10px;
  336.  
    color: #FFFFFF;
  337.  
    cursor: pointer;
  338.  
    display: table-cell;
  339.  
    float: right;
  340.  
    font-family: "Zeyada";
  341.  
    margin-left: 20px;
  342.  
    transition: text-shadow 0.5s ease 0s;
  343.  
    padding: 45px 25px;
  344.  
    margin-top: 20px;
  345.  
    text-align: center;
  346.  
    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;
  347.  
    width: 270px;
  348.  
    }
  349.  
     
  350.  
    .zhufu_box:hover {
  351.  
    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;
  352.  
    }
学新通

完整js代码:

  1.  
    $(document).ready(function () {
  2.  
    var stars = 800;
  3.  
    var $stars = $(".stars");
  4.  
    var r = 800;
  5.  
    for (var i = 0; i < stars; i ) {
  6.  
    var $star = $("<div />").addClass("star");
  7.  
    $stars.append($star);
  8.  
    }
  9.  
    $(".star").each(function () {
  10.  
    var cur = $(this);
  11.  
    var s = 0.2 (Math.random() * 1);
  12.  
    var curR = r (Math.random() * 300);
  13.  
    cur.css({
  14.  
    transformOrigin: "0 0 " curR "px",
  15.  
    transform: " translate3d(0,0,-" curR "px) rotateY(" (Math.random() * 360) "deg) rotateX(" (Math.random() * -50) "deg) scale(" s "," s ")"
  16.  
     
  17.  
    })
  18.  
    })
  19.  
    })
  20.  
     
  21.  
     
  22.  
     
  23.  
    $(function () {
  24.  
    function numberRandom(max, min) {
  25.  
    var num = (Math.random() * (max - min) min).toFixed(2)
  26.  
    return num;
  27.  
    }
  28.  
     
  29.  
    for (let index = 0; index < 20; index ) {
  30.  
    let left = document.createElement('div');
  31.  
    left.className = 'kmdleft';
  32.  
     
  33.  
    let right = document.createElement('div');
  34.  
    right.className = 'kmdright';
  35.  
     
  36.  
    let bottom = document.createElement('div');
  37.  
    bottom.className = 'kmdbottom';
  38.  
     
  39.  
    let kongMing = document.createElement('div');
  40.  
     
  41.  
    kongMing.className = 'kongmingdeng';
  42.  
    kongMing.style =
  43.  
    'width:' numberRandom()
  44.  
    '%;'
  45.  
    'left:'
  46.  
    numberRandom(150, 0)
  47.  
    'vw; bottom:'
  48.  
    numberRandom(-4, -15)
  49.  
    'vw; animation: FlyFour '
  50.  
    numberRandom(20, 15)
  51.  
    's linear infinite; animation-delay:'
  52.  
    numberRandom(15, 1)
  53.  
    's;';
  54.  
     
  55.  
    kongMing.appendChild(left);
  56.  
    kongMing.appendChild(right);
  57.  
    kongMing.appendChild(bottom);
  58.  
    document.getElementById('kmd').appendChild(kongMing);
  59.  
    }
  60.  
    })
  61.  
     
  62.  
    $(function () {
  63.  
    function numberRandom(max, min) {
  64.  
    var num = (Math.random() * (max - min) min).toFixed(2)
  65.  
    return num;
  66.  
    }
  67.  
     
  68.  
     
  69.  
    for (let index1 = 0; index1 < 25; index1 ) {
  70.  
    let left1 = document.createElement('div');
  71.  
    left1.className = 'kmdleft';
  72.  
     
  73.  
    let right1 = document.createElement('div');
  74.  
    right1.className = 'kmdright';
  75.  
     
  76.  
    let bottom1 = document.createElement('div');
  77.  
    bottom1.className = 'kmdbottom';
  78.  
     
  79.  
    let kongMing1 = document.createElement('div');
  80.  
    kongMing1.className = 'kongmingdeng-little';
  81.  
     
  82.  
    kongMing1.style =
  83.  
    'left:'
  84.  
    numberRandom(150, 0)
  85.  
    'vw; bottom:'
  86.  
    numberRandom(-4, -15)
  87.  
    'vw; animation: FlyThree '
  88.  
    numberRandom(20, 15)
  89.  
    's linear infinite; animation-delay:'
  90.  
    numberRandom(15, 1)
  91.  
    's;';
  92.  
     
  93.  
    kongMing1.appendChild(left1);
  94.  
    kongMing1.appendChild(right1);
  95.  
    kongMing1.appendChild(bottom1);
  96.  
    document.getElementById('kmd').appendChild(kongMing1);
  97.  
    }
  98.  
    })
学新通

学新通2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)

学新通

  1. 2023春节祝福系列第一弹(放飞孔明灯为所有人祈福,祝福大家身体健康)
  2. 2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你
  3.  

   推荐阅读:

     
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

学新通

 
14

学新通

草莓熊python turtle绘图(风车版)附源代码

13

学新通

用代码过中秋,python海龟月饼你要不要尝一口?

12

学新通

《 Python List 列表全实例详解系列》__系列总目录

11

学新通

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

10

学新通

Python函数方法实例详解全集(更新中...)

9

学新通

matplotlib 自带绘图样式效果展示速查(28种,全)

8

学新通

手机屏幕坏了____怎么把里面的资料导出(18种方法)

7

学新通

2023年6月多家权威机构____编程语言排行榜__薪酬状况

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环境)(详细)

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhaheac
系列文章
更多 icon
同类精品
更多 icon
继续加载