夏之雪
本帖最后由 大猫咪 于 2022-3-27 14:40 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1166px; height: 568px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/154b27a7b91eaaaf.webp') 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: 2rem;
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: 120px;
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:120px; top: 40px; ">夏之雪</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
<img alt="" src="https://s3.bmp.ovh/imgs/2022/03/a95a573c089021cf.gif"/>
<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=29491057.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> 只有海拔达到一定高度，才有夏天的雪{:4_204:} 熊大 发表于 2022-3-27 14:17
只有海拔达到一定高度，才有夏天的雪
熊大来了 {:4_187:}真开心！这海拔够了吧 哈哈 ，周末快乐！{:4_179:} 大猫咪 发表于 2022-3-27 14:19
熊大来了 真开心！这海拔够了吧 哈哈 ，周末快乐！
在雪线之上了！
参考玉龙雪山 熊大 发表于 2022-3-27 14:22
在雪线之上了！
参考玉龙雪山
嗯嗯 和熊大一起看风景{:5_106:}{:4_190:}{:4_187:} 猫儿你这帖子不能评分呢 咋回事 清凉寂静里流淌着暖意，猫儿好制作 {:4_187:} 来看你 发表于 2022-3-27 14:26
清凉寂静里流淌着暖意，猫儿好制作
氺哥来了，真开心{:4_187:}继续学习，特别喜欢这歌 {:4_179:}周末快乐 {:4_190:} 大猫咪 发表于 2022-3-27 14:28
氺哥来了，真开心继续学习，特别喜欢这歌 周末快乐
先前电脑静音我都不知道 {:5_106:}
确实好听极了 {:4_204:} 来看你 发表于 2022-3-27 14:30
先前电脑静音我都不知道
确实好听极了
氺哥空了也一起学习 {:5_106:} 挺好玩的 {:4_204:} 大猫咪 发表于 2022-3-27 14:31
氺哥空了也一起学习挺好玩的
我是看到传图就头大{:5_111:} 来看你 发表于 2022-3-27 14:38
我是看到传图就头大
慢慢学习就不大了{:4_189:}我也刚学会 {:4_204:} 氺哥我出去下，接个人去 回见 {:4_204:}{:4_183:} 大猫咪 发表于 2022-3-27 14:48
氺哥我出去下，接个人去 回见
猫猫先忙事，空了一起玩 {:4_185:} 猫猫又换了个动图，这个雁飞得好快啊。歌曲很好听，图图也漂亮。欣赏猫猫好帖{:4_187:} 来看你 发表于 2022-3-27 14:50
猫猫先忙事，空了一起玩
刚回来{:4_187:} 嗯嗯 空了一起学习 红影 发表于 2022-3-27 15:15
猫猫又换了个动图，这个雁飞得好快啊。歌曲很好听，图图也漂亮。欣赏猫猫好帖
哈哈 是的红影， 换了一个玩玩 {:4_187:}{:4_189:} 猫猫制作得真漂亮，雁儿飞得好快。歌曲很好听。{:4_199:} 这个景色真美{:4_204:}和曲一样空灵的感觉 云之上的雪景吗，很美{:4_187:}