【生日答谢】岁月的家书
<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 860px; background:#333 url('/data/attachment/forum/202204/01/163306sga16bb23vz3lclb.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: 5rem;
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: 0px;
height: 0px;
border: none;
outline: none;
border-radius: 0px;
background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.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:400px; top: 150px; width:400px;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.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;">
<marquee scrollamount="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=28111971.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/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>
</script>
</script>
</script>
</script>
</script>
</script>
</script> @大猫咪 @马黑黑 @加林森 @绿叶清舟 @红影 @来看你
感谢友友们真挚的祝福! 很开心结识大家! 祝福你们平安喜乐!吉祥如意!{:4_204:}{:4_187:}{:4_171:}{:4_191:} {:4_187:} {:4_204:} {:4_187:}{:4_177:}平安喜乐! 制作真漂亮,色彩好喜欢,歌非常好听,融合的很有感觉 小九真棒 !{:4_187:}
平安喜乐!吉祥如意!
{:4_204:}{:4_191:} 这生日过的也太快了吧?俺才看见,就过完啦?{:5_115:} 那就在这里祝福生日快乐吧!{:4_187:} 东篱闲人 发表于 2022-4-1 19:32
那就在这里祝福生日快乐吧!
谢谢老头的祝福! 是今天,也祝福你快乐每一天{:4_187:} 小九 发表于 2022-4-1 19:34
谢谢老头的祝福! 是今天,也祝福你快乐每一天
那说明还没过完呢啊?{:5_115:} 东篱闲人 发表于 2022-4-1 19:37
那说明还没过完呢啊?
{:4_189:} 是啊,得慢点过 制作真棒啊{:5_166:}生日快乐 九儿的答谢这么快,也不说安心过个生日,就忙着做帖啊{:4_173:}
九儿抹图好美,谢谢好礼,再祝九儿生日快乐,芳龄永驻{:4_187:} 小九生日快乐哦,祝你平安喜乐每一天。{:4_187:}{:5_166:} 小九图图做的漂亮,鼓掌送花花{:4_199:}{:4_187:} 千羽 发表于 2022-4-1 22:35
小九图图做的漂亮,鼓掌送花花
谢谢羽儿的祝福! 愿平安快乐永远伴随你!{:4_187:}{:4_171:}{:4_191:}
页:
[1]