论坛 › 『唯美音画』 › 磁性男声-- 往事如昔 TO：小沫

宁静 发表于 2022-8-13 16:54

磁性男声-- 往事如昔 TO：小沫

本帖最后由 宁静 于 2023-2-22 15:27 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#ces { position: relative; left:-10px; top:150px; width: 1024px; height: 600px; background:#333 url('https://pic.imgdb.cn/item/62334d755baa1a80ab74e476.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 3.8rem;
      font-weight: bold;
      color: #f9c866;
      transform-origin: top;
      animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
      width: 40px;
      height: 35px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/623403705baa1a80abe37865.gif') no-repeat;
      cursor: pointer;
}
</style>

<div id="ces" >
      <div id="baiBox" style="position: absolute; left:120px; top: 50px; ">往事如昔</div>
      <div style="position: absolute; left:20px; top: 250px; width:382px;text-align:center;">
                <img alt="" src="http://image.hnol.net/c/2022-03/18/02/202203180205535571-5087368.gif"/>
                  
<p ><font color="#ffffff" size="4" >
         
                <div style="position:absolute; width:260px; left:160px; top: -30px; text-align:center;padding:5px;font-size:1.em;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
                        <marqueescrollamount="4" direction="left" > 帖赠：小沫演唱：陈歌--【往事如昔】 一首低沉的磁性男声非常有感染力 一起欣赏
</marquee>，
                </div>
      </div>
      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:120px; left: 310px; top:calc(100% - 140px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
      </div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1804512245.mp3" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/623403705baa1a80abe37865.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/623403955baa1a80abe390b1.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/623403955baa1a80abe390b1.png')";
});

</script>

<br><br><br><br><br><br><br><br><br>

宁静 发表于 2022-8-13 16:56

@小沫

小沫房子算了{:9007:}，送首歌给你，一起欣赏{:10_401:}

宁静 发表于 2022-8-13 16:58

手机手动播放，点击绿的小频谱

小沫 发表于 2022-8-13 17:17

沙发沙发

小沫 发表于 2022-8-13 17:20

帖子好漂亮啊
低沉的男声嗓音，
听着很像张国荣哥哥
谢谢宁静的礼物{:10_402:}

蜻蜓 发表于 2022-8-13 18:20

漂亮{:10_402:}

苏三月 发表于 2022-8-13 19:47

图图做的漂亮，播放器小巧玲珑好可爱{:10_408:}

苏三月 发表于 2022-8-13 19:49

歌儿也好听{:12_689:}

瞳萤 发表于 2022-8-13 20:02

画面真美，歌也好听~
宁静周末快乐
我家亲爱的收贴快乐~

沉默 发表于 2022-8-14 11:28

磁性男声，好听{:10_402:}

查看完整版本: 磁性男声-- 往事如昔 TO：小沫