加林森 发表于 2022-5-13 14:10

《Lemon》（纯音乐）小提琴

本帖最后由 加林森 于 2022-5-13 14:19 编辑 <br /><br /><style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 639px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/627df7e30947543129380551.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: 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:380px; color:#FFA500;"><marqueescrollamount="3" direction="left" >Lemon(纯音乐) 小提琴</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/90362.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-13 15:24

好看的帖子，好听的音乐。欣赏队长好帖{:4_187:}

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

红影 发表于 2022-5-13 15:24
好看的帖子，好听的音乐。欣赏队长好帖

小提琴拉得真好听的。

梦油 发表于 2022-5-13 17:16

欣赏美乐、问候队长。

樵歌 发表于 2022-5-13 17:18

画面明丽，音乐好听{:4_199:}

加林森 发表于 2022-5-13 19:18

梦油 发表于 2022-5-13 17:16
欣赏美乐、问候队长。

谢谢老梦！

加林森 发表于 2022-5-13 19:19

樵歌 发表于 2022-5-13 17:18
画面明丽，音乐好听

是的。音画我感觉就应该这样简单的。

马黑黑 发表于 2022-5-13 19:31

队长腻害，帖子好美

梦油 发表于 2022-5-13 20:25

加林森 发表于 2022-5-13 19:18
谢谢老梦！

别客气。

加林森 发表于 2022-5-13 20:32

马黑黑 发表于 2022-5-13 19:31
队长腻害，帖子好美

谢谢老黑！

加林森 发表于 2022-5-13 20:32

梦油 发表于 2022-5-13 20:25
别客气。

快去收礼，给你找到制作出来了。

马黑黑 发表于 2022-5-13 20:35

加林森 发表于 2022-5-13 20:32
谢谢老黑！

{:4_180:}

樵歌 发表于 2022-5-13 20:38

加林森 发表于 2022-5-13 19:19
是的。音画我感觉就应该这样简单的。

我很喜欢{:4_190:}

加林森 发表于 2022-5-13 20:42

马黑黑 发表于 2022-5-13 20:35


{:4_191:}

加林森 发表于 2022-5-13 20:42

樵歌 发表于 2022-5-13 20:38
我很喜欢

喜欢就好！{:4_190:}

大猫咪 发表于 2022-5-13 20:50

特别喜欢小提琴的旋律，现在听真舒服，队长好分享，好听又好看！赞！晚上好！

{:4_204:}{:4_179:}

加林森 发表于 2022-5-13 20:58

大猫咪 发表于 2022-5-13 20:50
特别喜欢小提琴的旋律，现在听真舒服，队长好分享，好听又好看！赞！晚上好！

猫猫也喜欢啊。那真好。晚上好！{:4_204:}{:4_179:}

大猫咪 发表于 2022-5-13 21:03

加林森 发表于 2022-5-13 20:58
猫猫也喜欢啊。那真好。晚上好！

非常棒队长好分享   {:4_179:}

红影 发表于 2022-5-13 21:31

加林森 发表于 2022-5-13 15:45
小提琴拉得真好听的。

队长的制作也好看{:4_187:}

加林森 发表于 2022-5-13 21:50

红影 发表于 2022-5-13 21:31
队长的制作也好看

很清淡的制作。{:4_204:}
页: [1] 2
查看完整版本: 《Lemon》（纯音乐）小提琴