加林森 发表于 2022-1-5 11:00

本帖最后由 加林森 于 2022-2-7 17:15 编辑 <br /><br />马黑黑 发表于 2022-1-5 09:48
我也是出差在外，用中柏平板玩玩
好的好的

<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1388px;
      height: 700px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/6200b5522ab3f51d91aa11bf.jpg') no-repeat;
      left: -390px;
      top: 150px
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 600px; height: 2px;
      background: silver;
      left: 170px; top: 120px;
      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); } }
/*旋转按钮*/
.roBox40 {
      margin: 10px;
      position: relative;
      width: 40px; height: 40px;
      line-height: 40px; font-size: 14px;
      background: linear-gradient(Teal,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;
}
.roBox40:hover { opacity: 0.8; }
.roBox40:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:650px; top:600px; color: #CCC;"><marqueescrollamount="2" direction="left" ><font face="微软雅黑"><font size="3"><h1 style="font-size: 30px; font-weight:bold; color: #ff0000; text-shadow:

      0px 0px 0 #b89800,
      1px -1px 0 #b39400,
      2px -2px 0 #ad8f00,
      3px -3px 0 #a88b00,
      4px -4px 0 #a38700,
      5px -5px 0 #9e8300,
      6px -6px 6px rgba(0, 0, 0, 0.55),
      6px -6px 1px rgba(0, 0, 0, 0.5);">一首歌曲，送小辣椒！</h1></font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox40" style="left:80%;top:82%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/1309.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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

马黑黑 发表于 2022-1-5 12:04

加林森 发表于 2022-1-5 11:00
好的好的

出差奔波，还好，一切遥控，必要时再出面

加林森 发表于 2022-1-5 17:35

马黑黑 发表于 2022-1-5 12:04
出差奔波，还好，一切遥控，必要时再出面

嗯嗯，真辛苦！老黑啊，现在疫情有点厉害，你自己要小心啊！

马黑黑 发表于 2022-1-5 18:06

加林森 发表于 2022-1-5 17:35
嗯嗯，真辛苦！老黑啊，现在疫情有点厉害，你自己要小心啊！

这个必须的。谢谢。

杨柳青 发表于 2022-1-5 19:28

加林森 发表于 2022-1-5 07:00
不错的

{:4_208:}

加林森 发表于 2022-1-5 19:31

马黑黑 发表于 2022-1-5 18:06
这个必须的。谢谢。

不客气，自己小心！

加林森 发表于 2022-1-5 19:31

杨柳青 发表于 2022-1-5 19:28


小青青喜欢就好！{:4_190:}

杨柳青 发表于 2022-1-5 19:40

加林森 发表于 2022-1-5 19:31
小青青喜欢就好！

大家都喜欢~~{:4_187:}

加林森 发表于 2022-1-5 19:43

杨柳青 发表于 2022-1-5 19:40
大家都喜欢~~

很好的{:4_190:}

马黑黑 发表于 2022-1-5 20:01

加林森 发表于 2022-1-5 19:31
不客气，自己小心！

{:4_181:}

加林森 发表于 2022-1-5 20:17

马黑黑 发表于 2022-1-5 20:01


嗯嗯

杨柳青 发表于 2022-1-6 21:49

加林森 发表于 2022-1-5 19:43
很好的

{:4_208:}

加林森 发表于 2022-1-6 21:50

杨柳青 发表于 2022-1-6 21:49


很好，听音乐。{:4_199:}

杨柳青 发表于 2022-1-6 21:53

加林森 发表于 2022-1-6 21:50
很好，听音乐。

队长发的音乐太多来不及听~~{:4_189:}

加林森 发表于 2022-1-6 21:55

杨柳青 发表于 2022-1-6 21:53
队长发的音乐太多来不及听~~

{:4_170:}搞不赢了哇。

杨柳青 发表于 2022-1-6 21:59

加林森 发表于 2022-1-6 21:55
搞不赢了哇。

{:5_151:}

加林森 发表于 2022-1-6 22:00

杨柳青 发表于 2022-1-6 21:59


{:4_170:}
页: 1 [2]
查看完整版本: 古筝音乐 送大家！