小九来看看你的帖子代码

马黑黑 · 发表于 2022-3-15 19:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-15 19:02 编辑

做了一些必要的调整，你会发现这个代码组织性更好，也更简洁。marquee标签保留，但不建议以后继续使用。

我的调整，一些细节可能不如你愿，你可以修改尺寸和位置。完整代码分享如下：

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 700px; background:#333 url('/data/attachment/forum/202203/13/125044dvouegood00j0olb.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: 120px;
      height: 120px;
      border: none;
      outline: none;
      border-radius: 8px;
      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:120px; 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=488664116.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>

@小九 @小辣椒 @大猫咪