朵拉 发表于 2025-1-16 19:33

【生日答谢】火红的萨日朗

<section style="
width: 520px; margin: 20px auto;
border: 1px solid LightBlue;
padding: 20px 10px;
background-color: #ffffff;
box-sizing:border-box;
display: flex;
flex-direction: column;
box-shadow: 2px 2px 6px rgba(0,0,0,.36);">
<br>
<style>
      #mydiv { margin: 0px 00 100px; width: 300px; height:300px; background:#fff url('https://pic.imgdb.cn/item/66db2d9fd9c307b7e9c743ed.jpg') no-repeat center/cover; border-radius:8px 8px; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
      txt-box { position: absolute;margin-left: 230px;margin-top: 230px;display: grid; place-items: center; top: var(--xx); bottom: 10px; width: 30px; height: 30px; font: normal 20px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
      txt-box::after { position: absolute; content: '...'; inset: -4px; border: thick outset lightblue; border-radius:50% 0%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
      txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
      #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px);border-radius:50% 50%; object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
      #vid2 {position: absolute;margin-top: 0px;width: 100%; height: 100%;top:0px;border-radius:50% 50%;transform: rotateY(180deg);object-fit: cover; pointer-events: none; mix-blend-mode: screen;z-index: 5;opacity: .59;}
      @keyframes move { to { bottom:0px; } }
      @keyframes rot { to { transform: rotateX(365deg); } }
</style>

<div id="mydiv">
      <audio id="aud" src="https://zgsy.cdn.bcebos.com/lianl.mp3" autoplay="" loop=""></audio>
      
      <img id="vid2" src="https://gd-hbimg.huaban.com/4d3a42272d2760f6deed127346944bd1f12294972a40b6-W51vl4">
            
</div>

<script>
(function() {
      const ar = '朵'.split('');
      const total = ar.length, half = Math.floor(ar.length / 2), ww =250;
      let tbAr = [];
      ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k +1}px;
                        --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                mydiv.appendChild(tbox);
      });
      aud.onplaying = aud.onpause = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
      };
      tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
   <section style="width: 600px; margin: 50px auto; display: flex; flex-direction: column;">
<div style="margin: 0px 00 80px;position: absolute; font: bold 1.5em sans-serif;text-shadow: 1px 1px 2px #00000050; text-align: center; ">
<a style="color: Brown;text-decoration: none;"href="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=dIjtDAdMaqXL4d5G" target="_blank">         火 红 的 萨 日 朗
【 翻 唱：朵 拉 】</a></div>

<section data-role="paragraph" class="" data-width="45%" style="width: 45%;flex: 0 0 45%; margin-left: 100px; margin-right: auto;box-sizing:border-box;max-width:45% !important; magin-bottom: 50px;"><p><strong ><span style="color: Brown; font-size: 14px; letter-spacing: 1.3px; text-decoration-thickness: initial; display: inline !important;font-family:Tahoma,;Microsoft Yahei&quot;, Simsun;">
<br><br><br>


天下有多大随它去宽广<br>
大路有多远幸福有多长<br>
听惯了牧马人悠扬的琴声<br>
爱上这水草丰美的牧场<br><br>

花开一抹红尽情的怒放<br>
河流有多远幸福有多长<br>
习惯了游牧人自由的生活<br>
爱人在身边随处是天堂<br><br>

草原最美的花火红的萨日朗<br>
一梦到天涯遍地是花香<br>
流浪的人啊心上有了她<br>
千里万里也会回头望<br><br>

草原最美的花火红的萨日朗<br>
火一样热烈火一样奔放<br>
痴情的人啊心上有了她<br>
有种幸福叫地久天长<br>


</strong></p></section>
</p>
                  </section>
   
<section style="margin: 10px auto; display: flex; align-items: flex-end;">
                <section style="width: 350px;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
                        <section class="">
                              <section class="assistant" style="width: 43px;box-sizing:border-box;" data-width="43px">
                                        <section class="_" data-role="title" data-tools="" data-id="">
                                                <section style="margin: 10px auto;">
                                                      <section class="assistant" style="width: 35px;margin: 0 auto;box-sizing:border-box;">
                                                                <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width:100% !important;" src="https://bcn.135editor.com/files/images/editor_styles/82269e8183dce300f73ca6a3e691230f.gif" data-width="100%" draggable="false" data-ratio="0.8618421052631579" data-w="304"/>
                                                      </section>
                                                </section>
                                        </section>
                              </section>
                              <section style="font-size: 14px;color: LightBlue;text-align: right;padding: 0 10px;box-sizing:border-box;">
                                        <span class="" data-brushtype="text">2025.01.16</span>
                              </section>
                        </section>

                        <section style="width: 100%;margin-top: -23px;max-width: 100% !important;box-sizing:border-box;" data-width="100%" class="">
                              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 321.5 35.97" style="display: block;" xml:space="default">
                                        <g id="图层_2" data-name="图层 2">
                                                <g id="图层_1-2" data-name="图层 1">
                                                      <path d="M.42,5.31c9.48,15.18,71.9,43,117.73,22.25s-14.79-42.9,9.34-11.12,194,14.15,194,14.15" style="fill:none;stroke:LightBlue;stroke-dasharray:4,2"/>
                                                </g>
                                        </g>
                              </svg>
                        </section>
                </section>

                <section style="flex-shrink: 0;display: flex;align-items: center;">
<section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color: LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                              <strong class="135brush" data-brushtype="text">朵</strong>
                        </section>

                        <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color: LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                              <strong class="135brush" data-brushtype="text">拉</strong>
                        </section>
                        <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color:LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                              <strong class="135brush" data-brushtype="text">制</strong>
                        </section>
                        <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color:LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                              <strong class="135brush" data-brushtype="text">作</strong>
                        </section>
                </section>
      </section>
</section>
<section class="" data-role="title" data-tools="" data-id="">
      <section style="margin: 10px auto; display: flex; justify-content: center;" class="">
                <section class="assistant" style="width: 264px;box-sizing:border-box;" data-width="264px" ></section>
</section>

朵拉 发表于 2025-1-16 19:36

@红影
@樵歌
@小辣椒
@绿叶清舟
@梦油
@小九
感谢朋友们的生日祝福，
祝你们幸福快乐每一天{:4_204:}

绿叶清舟 发表于 2025-1-16 19:52

朵拉的声音太好听了，唱得真棒{:4_204:}

梦油 发表于 2025-1-16 19:55

朵拉朋友唱得这么好啊，真有点专业演员的范儿。{:5_116:}

红影 发表于 2025-1-16 20:09

朵宝真好，这回礼真好{:4_199:}

红影 发表于 2025-1-16 20:10

这个制作漂亮，朵宝的演唱太好听了{:4_187:}

红影 发表于 2025-1-16 20:22

非常专业的演绎，听得醉了。给朵宝点赞{:4_199:}

樵歌 发表于 2025-1-16 21:10

朵儿深藏不露，原来唱得如此专业{:4_195:}通俗的唱法用得娴熟，声音也很好听。{:4_173:}

杨帆 发表于 2025-1-16 23:43

唱的真好！祝朵拉生日快乐，快乐天天{:4_204:}

梦江南 发表于 2025-1-17 08:36

唱的真好，欣赏点赞！{:4_199:}

小九 发表于 2025-1-17 10:26

唱得真好听，胜过原唱的感觉，祝朵儿开心如意！{:4_199:}{:4_204:}

小辣椒 发表于 2025-1-17 21:38

欣赏朵拉金嗓子演绎{:4_208:}
页: [1]
查看完整版本: 【生日答谢】火红的萨日朗