雁南飞 TO好开心
本帖最后由 大猫咪 于 2022-3-18 23:31 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 572px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/dfb9e16ec3894a68.png') 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: 1rem;
font-weight: bold;
color: #EEEE00;
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: 80px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif') no-repeat;
cursor: pointer;
}
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:50px; top: 40px; ">雁南飞- 刀郎,黄灿 </div>
<div style="position: absolute; left:120px; top: 100px; width:300px;text-align:center;">
<img alt="" src="https://wkphoto.cdn.bcebos.com/9d82d158ccbf6c8135b8fc8bac3eb13532fa40c2.jpg"/>
<div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
<marqueescrollamount="5" direction="left" > </marquee>
</div>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=77218.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://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')";
});
</script>
@好开心 做个帖子送开心兄！ 祝一切安好！开心每一天{:5_106:}{:4_204:} 这个意境壮阔，大雁的点缀尤其漂亮，还是带摇摆字的。猫猫的帖子越做越漂亮了，大赞{:4_199:} 好开心收礼肯定好开心的{:4_173:} 猫太棒了，这制作完全融合了歌曲{:4_204:}
好开心收礼开心 {:4_173:}收到礼物好开心{:4_173:} {:4_196:}春天来了，大雁很快就要北回，回到故乡。
南飞北飞，总是追寻着鲜花的足迹。 大猫咪 发表于 2022-3-18 22:47
做个帖子送开心兄！ 祝一切安好！开心每一天
一切安好，忙，并快乐着，感动着大猫咪的挂念，遥祝大猫咪也每天开心快乐{:4_204:} 好开心 发表于 2022-3-19 12:37
一切安好，忙，并快乐着，感动着大猫咪的挂念，遥祝大猫咪也每天开心快乐
谢谢开心兄，才学习 {:5_106:}哈哈，周末快乐！春安好{:4_179:}
页:
[1]