加林森 发表于 2022-2-8 19:16

《花儿香》 春雷


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/620241d22ab3f51d91132fea.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 300px; top: 230px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox32 {
      margin: 10px;
      position: relative;
      width: 32px; height: 32px;
      line-height: 32px; font-size: 12px;
      background: linear-gradient(blue,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox32:hover { opacity: 0.8; }
.roBox32:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:240px; top:580px; color:#FFA500;"><marqueescrollamount="3" direction="left" >花儿香编辑/加林森</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/88585.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>

加林森 发表于 2022-2-8 19:17

花儿香
作词：唐艺心
作曲：春雷
编曲：陈彤 录音：严超
后期缩混：志伟（台湾）
演唱：春雷


云儿长
悠悠飘在天空上
心向往
回到梦里的地方
情歌唱
唱得风儿不再忧伤
让星光点亮相思的方向

云儿长
悠悠飘在天空上
心向往
回到梦里的地方
情歌唱
唱得风儿不再忧伤
让星光点亮相思的方向

风吹花儿香
映红你脸庞
思念的月亮
来到我身旁
爱在高原上
那是我家乡
梦想在远方
幸福的歌唱

云儿长
悠悠飘在天空上
心向往
回到梦里的地方
情歌唱
唱得风儿不再忧伤
让星光点亮相思的方向

风吹花儿香
映红你脸庞
思念的月亮
来到我身旁
爱在高原上
那是我家乡
梦想在远方
幸福的歌唱

风吹花儿香
映红你脸庞
思念的月亮
来到我身旁
爱在高原上
那是我家乡
梦想在远方
幸福的歌唱


红影 发表于 2022-2-8 19:36

好漂亮的花儿。这首歌还挺好听的{:4_204:}

大猫咪 发表于 2022-2-8 19:38

好听制作又好看，队长好分享，真棒！

{:4_204:}{:4_199:}

加林森 发表于 2022-2-8 19:38

红影 发表于 2022-2-8 19:36
好漂亮的花儿。这首歌还挺好听的
是啊。是他唱的。
https://joy127.jstools.net/pic?type=tencent&id=001GLb5w2YIOh2


加林森 发表于 2022-2-8 19:40

大猫咪 发表于 2022-2-8 19:38
好听制作又好看，队长好分享，真棒！

猫猫喝茶。{:4_190:}

大猫咪 发表于 2022-2-8 19:41

加林森 发表于 2022-2-8 19:40
猫猫喝茶。

嗯嗯   和队长一起喝一起品音乐，真好！

{:4_204:}{:4_190:}{:4_190:}

加林森 发表于 2022-2-8 19:44

大猫咪 发表于 2022-2-8 19:41
嗯嗯   和队长一起喝一起品音乐，真好！

好的好的。{:4_204:}{:4_190:}{:4_190:}

樵歌 发表于 2022-2-8 19:53

做得越来越漂亮了。{:4_178:}

樵歌 发表于 2022-2-8 19:54

喜欢春雷的歌，我手机有他的专集。{:4_205:}

加林森 发表于 2022-2-8 19:55

樵歌 发表于 2022-2-8 19:53
做得越来越漂亮了。

主要是图片很漂亮，才能制作出效果来。

加林森 发表于 2022-2-8 19:56

樵歌 发表于 2022-2-8 19:54
喜欢春雷的歌，我手机有他的专集。

第一高音，真不容易的。

红影 发表于 2022-2-8 20:19

加林森 发表于 2022-2-8 19:38
是啊。是他唱的。

这人的声音挺好听的。

加林森 发表于 2022-2-8 20:25

红影 发表于 2022-2-8 20:19
这人的声音挺好听的。

是的。亚洲第一高音歌唱家。
还有，红影你注意到没有，我调整了一下这个内容的代码。

樵歌 发表于 2022-2-8 20:26

加林森 发表于 2022-2-8 19:55
主要是图片很漂亮，才能制作出效果来。

不对吧，是手艺好。

樵歌 发表于 2022-2-8 20:26

加林森 发表于 2022-2-8 19:56
第一高音，真不容易的。

嗯，高音王子。

加林森 发表于 2022-2-8 20:29

樵歌 发表于 2022-2-8 20:26
嗯，高音王子。

是的。

加林森 发表于 2022-2-8 20:31

樵歌 发表于 2022-2-8 20:26
不对吧，是手艺好。

哈哈，樵歌好风趣。

小辣椒 发表于 2022-2-8 20:35

队长很勤奋，做了好几个这个按钮的播放器了

加林森 发表于 2022-2-8 20:54

小辣椒 发表于 2022-2-8 20:35
队长很勤奋，做了好几个这个按钮的播放器了

是的是的，现在很有感觉了。也知道该怎么调定位了。
页: [1] 2
查看完整版本: 《花儿香》 春雷