加林森 发表于 2022-1-29 18:44

2018全力打造草原舞曲慢摇大碟的音乐

本帖最后由 加林森 于 2022-7-20 18:30 编辑 <br /><br /><style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/61f522f32ab3f51d91566a35.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 600px; height: 2px;
      background: silver;
      left: 160px; 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:300px; top:500px; color: #fff;"><marqueescrollamount="3" direction="left" >2018全力打造草原舞曲慢摇大碟的音乐</marquee></p>
      <!-- 按钮 -->
      <div Id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio Id="ymusic" src="https://data.jstools.net/joy127/201908/8/1565237036.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusc');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayS tate="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-1-29 19:42

这帖可以开车时听

加林森 发表于 2022-1-29 19:46

顾-念 发表于 2022-1-29 19:42
这帖可以开车时听

是的是的，老顾晚上好。{:4_190:}

红影 发表于 2022-1-29 20:18

怪事，我又是听不到呢。

加林森 发表于 2022-1-29 20:28

红影 发表于 2022-1-29 20:18
怪事，我又是听不到呢。

怎么回事啊？{:5_115:}

红影 发表于 2022-1-29 20:56

加林森 发表于 2022-1-29 20:28
怎么回事啊？

不清楚呢。

加林森 发表于 2022-1-29 21:19

红影 发表于 2022-1-29 20:56
不清楚呢。

我去换老黑的代码过来，看行不行。

樵歌 发表于 2022-1-29 21:36

听不到呢。{:4_203:}

加林森 发表于 2022-1-29 21:39

樵歌 发表于 2022-1-29 21:36
听不到呢。

有点慢，耐心点哈。

红影 发表于 2022-1-29 21:45

加林森 发表于 2022-1-29 21:19
我去换老黑的代码过来，看行不行。

各类容器的名称要对应好，代码语句应该是没问题。

加林森 发表于 2022-1-29 21:46

红影 发表于 2022-1-29 21:45
各类容器的名称要对应好，代码语句应该是没问题。

我已经发出来另外一个的帖了。

樵歌 发表于 2022-1-30 10:43

加林森 发表于 2022-1-29 21:39
有点慢，耐心点哈。

我等十分钟试试。。。。。

加林森 发表于 2022-1-30 10:49

樵歌 发表于 2022-1-30 10:43
我等十分钟试试。。。。。

我这里点开音乐就出来了。

樵歌 发表于 2022-1-30 11:05

我已经等了半小时还没打开，找小黑瞅下，哪里出问题了。{:4_173:}

加林森 发表于 2022-1-30 11:15

樵歌 发表于 2022-1-30 11:05
我已经等了半小时还没打开，找小黑瞅下，哪里出问题了。

好的好的
页: [1]
查看完整版本: 2018全力打造草原舞曲慢摇大碟的音乐