《时光海湾》 -- 梦然、冷漠
本帖最后由 加林森 于 2022-3-30 13:47 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#ces { position: relative; left:-205px; top:150px; width: 1024px; height: 600px;background:#333 url('https://pic.imgdb.cn/item/6243095527f86abb2ab83171.gif') 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/29/7a950d5d7590da016898be1ac0e0d576.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>
时光海湾 -- 梦然、冷漠
山环绕海海依偎山帆影飘来似近似远微风徐徐天高云淡站在海边等你出现海鸟飞飞海浪轻轻两行脚印深深浅浅星光点点落在水面静静看着你的侧脸只愿日日月月在你身边只愿平平淡淡此情不变山和海相望我和你相恋如风牵帆的手漫缦在海湾只愿岁岁年年在你身边只愿长长久久此心不变山与海相守我与你相伴如山岙连山岙时光恒久远海鸟飞飞海浪轻轻两行脚印深深浅浅星光点点落在水面静静看着你的侧脸只愿日日月月在你身边只愿平平淡淡此情不变山和海相望我和你相恋如风牵帆的手漫缦在海湾只愿岁岁年年在你身边只愿长长久久此心不变山与海相守我与你相伴如山岙连山岙时光恒久远只愿日日月月在你身边只愿平平淡淡此情不变山和海相望我和你相恋如风牵帆的手漫缦在海湾只愿岁岁年年在你身边只愿长长久久此心不变山与海相守我与你相伴如山岙连山岙时光恒久远如山岙连山岙时光恒久远
很神秘，鹰漫步的感觉酷{:4_191:} {:4_173:}{:4_204:}越看越酷 转转 发表于 2022-3-29 22:24
很神秘，鹰漫步的感觉酷
转转晚上好。{:4_190:} 转转 发表于 2022-3-29 22:25
越看越酷
飞翔得很美的吧。{:4_191:} 加林森 发表于 2022-3-29 22:30
飞翔得很美的吧。
嗯嗯，凌空一击又飞起{:4_177:} 好像评不了分，队长用了这么漂亮的鹰，真没的制作{:4_187:} 滚动字的内容好像没换啊，还是那个《默》的{:4_173:} 评分被鹰抓走了 红影 发表于 2022-3-29 22:49
滚动字的内容好像没换啊，还是那个《默》的
我正在看呢。{:5_113:} 马黑黑 发表于 2022-3-29 23:08
评分被鹰抓走了
老黑，我代码好像出问题了，你帮忙啊。{:5_102:} 转转 发表于 2022-3-29 22:37
嗯嗯，凌空一击又飞起
是的是的 转转 发表于 2022-3-29 22:37
嗯嗯，凌空一击又飞起
谢谢~~~~~~~~~~~{:4_204:} 加林森 发表于 2022-3-29 23:25
我正在看呢。
现在换过来，前面应该是忘记了吧。 加林森 发表于 2022-3-29 23:26
老黑，我代码好像出问题了，你帮忙啊。
慢慢找问题，自己不解决问题进步不会大的 红影 发表于 2022-3-29 22:47
好像评不了分，队长用了这么漂亮的鹰，真没的制作
全部修改了，你再来看看。 马黑黑 发表于 2022-3-30 12:14
慢慢找问题，自己不解决问题进步不会大的
全部修改完了，再来看看。 加林森 发表于 2022-3-30 13:52
全部修改了，你再来看看。
嗯嗯，现在都好了，队长真棒{:4_187:} 红影 发表于 2022-3-30 16:51
嗯嗯，现在都好了，队长真棒
谢谢红影。{:4_204:}{:4_190:}
页:
[1]
2