加林森 发表于 2022-5-7 11:18

《想着你亲爱的》-- 刘恺名、祁隆


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1000px;
      height: 562px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/6275e0ac0947543129d40a7a.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:480px; color:#FFA500;"><marqueescrollamount="3" direction="left" >想着你亲爱的--刘恺名、祁隆</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/03/17/b11b90dbcaa3ea48082828461e9f21f1.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-7 11:47

想着你亲爱的(想着你亲爱的) - 刘恺名

作词：祁隆

作曲：祁隆

编曲：高兴

缘分让我认识了你

从此我就爱上你

朝朝暮暮想的全是你

时刻把你记在我心里

只想听到你的声音

是令我那么的着迷

放下所有却放不下你

因为你就是我生命的唯一

想着你亲爱的

在我梦里梦的全是你

刻下你的名字在我的心

一定把你好好的珍惜

想着你亲爱的

在我心里想的全是你

许下个心愿一生陪着你

你就是我生命的奇迹

我爱你

缘分让我认识了你

从此我就爱上你

朝朝暮暮想的全是你

时刻把你记在我心里

只想听到你的声音

是令我那么的着迷

放下所有却放不下你

因为你就是我生命的唯一

想着你亲爱的

在我梦里梦的全是你

刻下你的名字在我的心

一定把你好好的珍惜

想着你亲爱的

在我心里想的全是你

许下个心愿一生陪着你

你就是我生命的奇迹

想着你亲爱的

在我梦里梦的全是你

刻下你的名字在我的心

一定把你好好的珍惜

想着你亲爱的

在我心里想的全是你

许下个心愿一生陪着你

你就是我生命的奇迹

我爱你

梦油 发表于 2022-5-7 13:34

加林森 发表于 2022-5-7 11:47
想着你亲爱的(想着你亲爱的) - 刘恺名

作词：祁隆


花潮的缘分让我认识了你——加林森朋友，
在我的心里刻下你的名字。一定把你好好的珍惜

加林森 发表于 2022-5-7 13:37

梦油 发表于 2022-5-7 13:34
花潮的缘分让我认识了你——加林森朋友，
在我的心里刻下你的名字。一定把你好好的珍惜

谢谢梦油，有你这样的朋友真是我最大的荣幸。{:4_204:}

红影 发表于 2022-5-7 13:43

队长真棒，又在复习旋转按钮和闪光效果，学习得真用功{:4_199:}

加林森 发表于 2022-5-7 13:46

红影 发表于 2022-5-7 13:43
队长真棒，又在复习旋转按钮和闪光效果，学习得真用功

温故而知新。{:4_204:}

梦油 发表于 2022-5-7 14:26

加林森 发表于 2022-5-7 13:37
谢谢梦油，有你这样的朋友真是我最大的荣幸。

谢谢！彼此彼此。

加林森 发表于 2022-5-7 14:41

梦油 发表于 2022-5-7 14:26
谢谢！彼此彼此。

好的好的。

罗浮梦 发表于 2022-5-7 18:52

熟悉的歌曲。来听歌。

加林森 发表于 2022-5-7 19:05

罗浮梦 发表于 2022-5-7 18:52
熟悉的歌曲。来听歌。

欢迎新朋友！{:4_428:}

红影 发表于 2022-5-8 10:23

加林森 发表于 2022-5-7 13:46
温故而知新。

忽然发现，这种格式的音乐加分后不会跳掉，我下回也用这个格式{:4_173:}

加林森 发表于 2022-5-8 11:48

红影 发表于 2022-5-8 10:23
忽然发现，这种格式的音乐加分后不会跳掉，我下回也用这个格式

就是，定位很重要的。

红影 发表于 2022-5-9 12:52

加林森 发表于 2022-5-8 11:48
就是，定位很重要的。

不是，我是说加分后音乐还能播放，不需要刷新。

红影 发表于 2022-5-9 12:54

还好队长无故而知新做了这个，发现这个音乐关联更好{:4_187:}

加林森 发表于 2022-5-9 13:34

红影 发表于 2022-5-9 12:54
还好队长无故而知新做了这个，发现这个音乐关联更好

是的是的。

加林森 发表于 2022-5-9 13:35

红影 发表于 2022-5-9 12:52
不是，我是说加分后音乐还能播放，不需要刷新。

这个原来就是这样的啊。老黑的代码当时就告诉我们了的，不会再飞出去了。

红影 发表于 2022-5-9 23:23

加林森 发表于 2022-5-9 13:35
这个原来就是这样的啊。老黑的代码当时就告诉我们了的，不会再飞出去了。

后面的几个加分后音乐会停，需要刷新。

加林森 发表于 2022-5-10 08:48

红影 发表于 2022-5-9 23:23
后面的几个加分后音乐会停，需要刷新。

是的，每个播放器都不同的。

红影 发表于 2022-5-11 10:02

加林森 发表于 2022-5-10 08:48
是的，每个播放器都不同的。

所以不停的更好。

加林森 发表于 2022-5-11 11:08

红影 发表于 2022-5-11 10:02
所以不停的更好。

就是，好玩的。
页: [1]
查看完整版本: 《想着你亲爱的》-- 刘恺名、祁隆