《 繁花尽》 -- 锦零
本帖最后由 加林森 于 2022-3-19 23:21 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 550px; background:#333 url('https://pic.imgdb.cn/item/623568365baa1a80aba9acc2.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: 3rem;
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('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.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://pic.imgdb.cn/item/62356c5b5baa1a80abb30545.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://www.kumeiwp.com/sub/filestores/2022/03/19/86fc9155bcddf43ca730ec0a451ff3cb.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('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/202203121947494281-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/202203121947494281-5087368.gif')";
});
</script>
<br><br><br><br><br><br><br><br><br><br> 隊長 下午好
又一個漂亮的製作~ 朵嫣 发表于 2022-3-19 14:00
隊長 下午好
又一個漂亮的製作~
朵嫣下午好。{:4_204:}{:4_190:}
才制作的，还很新鲜呢。{:4_189:} 队长好制作，现在的图图还加了动图，漂亮{:4_199:} 小辣椒 发表于 2022-3-19 14:14
队长好制作，现在的图图还加了动图，漂亮
谢谢小辣椒支持！{:4_187:}{:4_190:} 队长这个帖子做得完美，无论是按钮还是动图，都很漂亮。给队长点赞{:4_187:} 红影 发表于 2022-3-19 15:20
队长这个帖子做得完美，无论是按钮还是动图，都很漂亮。给队长点赞
谢谢红影支持！{:4_187:} 养眼 马黑黑 发表于 2022-3-19 18:24
养眼
老黑晚上好。 加林森 发表于 2022-3-19 18:26
老黑晚上好。
晚上好队长 马黑黑 发表于 2022-3-19 18:26
晚上好队长
吃没？我刚吃完。 加林森 发表于 2022-3-19 18:29
吃没？我刚吃完。
快了快了 马黑黑 发表于 2022-3-19 18:29
快了快了
嗯嗯。 队长这制作真清爽，好听又好看！ 真棒！ 晚上好！
{:4_204:}{:4_179:} 大猫咪 发表于 2022-3-19 18:47
队长这制作真清爽，好听又好看！ 真棒！ 晚上好！
猫猫回家啦。吃晚饭没有？{:4_204:}{:4_179:} 加林森 发表于 2022-3-19 18:53
猫猫回家啦。吃晚饭没有？
刚吃完上来，队长晚上好，继续温暖 {:4_204:}{:4_179:} 大猫咪 发表于 2022-3-19 18:55
刚吃完上来，队长晚上好，继续温暖
好的啊，{:4_204:}{:4_179:} 加林森 发表于 2022-3-19 18:56
好的啊，
队长越做越棒了赞 看着真舒服{:4_179:} 大猫咪 发表于 2022-3-19 19:03
队长越做越棒了赞 看着真舒服
我也在慢慢学习呢。{:4_179:} 加林森 发表于 2022-3-19 19:27
我也在慢慢学习呢。
嗯嗯和队长一起继续努力{:4_179:}
页:
[1]
2