《烟花三月》 -- 纯音乐
<style type="text/css">
/* 外框盒子 */
#ces { position: relative; left:-205px; top:150px; width: 1024px; height: 600px;background:#333 url('https://pic.imgdb.cn/item/62444cad27f86abb2a79432e.jpg') no-repeat center/cover;
opacity: 0.8; 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: #FFFFFF;
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: 100px;
height: 89px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/6243df5b27f86abb2a5598f1.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: 350px; width:600px;text-align:center;">
<img alt="" src="https://pic.imgdb.cn/item/6243e09a27f86abb2a5a0895.gif"/>
<p ><font color="#ffffff" size="4" >
<div style="position:absolute; width:260px; left:160px; top: -200px; 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: 110px; top:calc(100% - 140px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://www.kumeiwp.com/sub/filestores/2022/03/30/59e19e571cd4eda300da51e5d8481442.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/6243df5b27f86abb2a5598f1.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6243df9527f86abb2a5660b9.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/6243df9527f86abb2a5660b9.png')";
});
</script>
<br><br><br><br><br><br><br><br><br><br>
烟花三月
艺术家 ：吴千
包含乐器 古筝 琵琶 竹笛
https://www.itingwa.com/file/img/2015-01/20150101014626-NzI1NjQz_332x499.jpg
队长这个制作漂亮的 绿叶清舟 发表于 2022-3-30 21:44
队长这个制作漂亮的
纯音乐好听的。{:4_204:} 真美，还有大大涟漪呢。烟花三月下扬州，赏尽江南美景{:4_187:} 加林森 发表于 2022-3-30 21:48
纯音乐好听的。
是啊，那是杨州瘦西湖吧 绿叶清舟 发表于 2022-3-30 21:49
是啊，那是杨州瘦西湖吧
是的是的 红影 发表于 2022-3-30 21:49
真美，还有大大涟漪呢。烟花三月下扬州，赏尽江南美景
谢谢红影支持！{:4_204:} 红影 发表于 2022-3-30 21:49
真美，还有大大涟漪呢。烟花三月下扬州，赏尽江南美景
开心就好！ 加林森 发表于 2022-3-31 00:21
开心就好！
这样的场景看得赏心悦目{:4_187:} 红影 发表于 2022-3-31 11:26
这样的场景看得赏心悦目
是的，我都很怀念过去了，我在扬州待过的。 加林森 发表于 2022-3-31 11:29
是的，我都很怀念过去了，我在扬州待过的。
美丽的扬州风景如画，的确很让人留恋。 红影 发表于 2022-3-31 12:13
美丽的扬州风景如画，的确很让人留恋。
是的，很美丽的地方。 加林森 发表于 2022-3-31 12:32
是的，很美丽的地方。
在单位组织的活动中去过那里。 红影 发表于 2022-3-31 13:45
在单位组织的活动中去过那里。
我是在那里讲学，待了三个月。 加林森 发表于 2022-3-31 13:47
我是在那里讲学，待了三个月。
时间不短的呢，也是春天么？ 队长越来越厉害了 红影 发表于 2022-3-31 20:31
时间不短的呢，也是春天么？
是啊。过完春节就去了。 马黑黑 发表于 2022-3-31 21:00
队长越来越厉害了
不是啊，是音乐好听的对吧。 加林森 发表于 2022-3-31 21:05
不是啊，是音乐好听的对吧。
都厉害
页:
[1]
2