花开故人来 TO--红芍药
本帖最后由 大猫咪 于 2022-3-20 21:46 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 460px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/7cb8c1755ec8ea85.gif') 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: 71px;
height: 48px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-03/17/01/202203170101161721-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://s3.bmp.ovh/imgs/2022/03/db2d339fed37a088.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: 50px; 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=1870930091.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/17/01/202203170101161721-5087368.gif ')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-03/17/01/202203170101449221-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-03/17/01/202203170101449221-5087368.gif')";
});
</script>
@红芍药 哈哈学习做个帖给芍药， 周末快乐！ 祝一切安好！ {:5_106:}{:4_204:} 欣赏花开美景 哇，猫猫的这个漂亮，全是动图呢，图中的景色好美。芍药姑娘收礼开心{:4_187:} 猫猫之前找的图片就好看，就知道猫猫做帖子肯定会很棒的，果然如此{:4_199:} 摇摆字和蝴蝶是同色系呢，漂亮{:4_187:} 好开心 发表于 2022-3-19 18:21
欣赏花开美景
谢谢开心兄支持鼓励，{:5_106:}晚上好{:4_179:} 红影 发表于 2022-3-19 19:09
猫猫之前找的图片就好看，就知道猫猫做帖子肯定会很棒的，果然如此
尺寸比例，还有好多代码还得熟悉，谢谢红影支持鼓励，猫继续努力 {:4_204:}{:4_179:} 大猫咪 发表于 2022-3-19 19:25
尺寸比例，还有好多代码还得熟悉，谢谢红影支持鼓励，猫继续努力
猫猫做帖子有天然优势的，等着你大放异彩{:4_187:} 这个创意好，和题目极配。。。。{:5_116:} 红影 发表于 2022-3-19 20:53
猫猫做帖子有天然优势的，等着你大放异彩
大放异彩{:4_170:} 哈哈 谢谢红影，周末快乐{:4_179:} 东篱闲人 发表于 2022-3-19 20:55
这个创意好，和题目极配。。。。
有俺们老头表扬，猫飘一下，周末快乐{:4_204:}{:4_179:} 猫儿越来越腻害了，大师级的 {:4_187:} 来看你 发表于 2022-3-20 14:47
猫儿越来越腻害了，大师级的
氺哥来了 {:4_187:} 开心！ 你一鼓励猫就信心满满 {:4_189:}周末快乐 {:4_190:}{:4_179:} 大猫咪 发表于 2022-3-20 14:49
氺哥来了开心！ 你一鼓励猫就信心满满 周末快乐
{:4_187:}猫儿确实棒极了，赞无数 {:4_185:} 来看你 发表于 2022-3-20 14:50
猫儿确实棒极了，赞无数
{:4_189:}嗯嗯， 猫继续努力{:4_204:} 氺哥也一起学习啊{:4_204:} 猫这个漂亮，与音乐融得太棒了{:4_204:} 我曾经收藏过这个短视频，可惜弄丟了{:4_199:} 闲言不语 发表于 2022-3-20 19:28
我曾经收藏过这个短视频，可惜弄丟了
哈哈 不语兄猫是在百度发现的{:5_106:}{:4_190:}
页:
[1]
2