加林森 发表于 2022-5-15 10:49

《车站》- (纯音乐)笛子


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 682px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/628068a909475431290fea54.jpg') no-repeat;
      left: -214px;
}
/* 父框和 .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: 64px; height: 64px;
      line-height: 64px; 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:620px; 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/90287.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-5-15 11:12

又是一个。{:4_173:}

加林森 发表于 2022-5-15 11:19

红影 发表于 2022-5-15 11:12
又是一个。

是啊。好听就行，对不对！

四海八荒 发表于 2022-5-15 11:22

笛子好听。

加林森 发表于 2022-5-15 11:28

四海八荒 发表于 2022-5-15 11:22
笛子好听。

是的。四海中午好！

红影 发表于 2022-5-15 12:34

加林森 发表于 2022-5-15 11:19
是啊。好听就行，对不对！

图片也选得很不错，好看{:4_187:}

加林森 发表于 2022-5-15 12:36

红影 发表于 2022-5-15 12:34
图片也选得很不错，好看

是的，选了几张，这个最漂亮。

大猫咪 发表于 2022-5-15 12:38

好听又好看   笛子版的也非常好听   队长好制作赞！周末快乐！

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

加林森 发表于 2022-5-15 12:40

大猫咪 发表于 2022-5-15 12:38
好听又好看   笛子版的也非常好听   队长好制作赞！周末快乐！

猫猫上来啦。中午好。就是听见好听就制作出来了。{:4_204:}{:4_190:}

大猫咪 发表于 2022-5-15 13:05

加林森 发表于 2022-5-15 12:40
猫猫上来啦。中午好。就是听见好听就制作出来了。

真棒 {:4_204:}

加林森 发表于 2022-5-15 13:11

大猫咪 发表于 2022-5-15 13:05
真棒

嗯嗯。{:4_190:}

醉美水芙蓉 发表于 2022-5-15 13:31

加林森 发表于 2022-5-15 14:07

醉美水芙蓉 发表于 2022-5-15 13:31
队长厉害！好听！

谢谢水芙蓉。{:4_204:}

小辣椒 发表于 2022-5-15 14:15

队长速度的，一下子这么多出来了{:4_178:}

加林森 发表于 2022-5-15 14:16

小辣椒 发表于 2022-5-15 14:15
队长速度的，一下子这么多出来了

是的，每天发一点点出来。

红影 发表于 2022-5-16 11:53

加林森 发表于 2022-5-15 12:36
是的，选了几张，这个最漂亮。

队长现在越做越好了呢{:4_187:}

加林森 发表于 2022-5-16 12:03

红影 发表于 2022-5-16 11:53
队长现在越做越好了呢

肯定要进步才行的。

红影 发表于 2022-5-16 13:38

加林森 发表于 2022-5-16 12:03
肯定要进步才行的。

给队长点赞{:4_187:}

加林森 发表于 2022-5-16 13:48

红影 发表于 2022-5-16 13:38
给队长点赞

谢谢红影！{:4_204:}

红影 发表于 2022-5-16 21:35

加林森 发表于 2022-5-16 13:48
谢谢红影！

不客气啊，问好勤奋的队长{:4_187:}
页: [1] 2
查看完整版本: 《车站》- (纯音乐)笛子