大猫咪 发表于 2022-3-15 22:34

爱的罗曼斯 TO平安

本帖最后由 大猫咪 于 2022-4-16 21:20 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1200px; height: 600px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/ae9d05e24e105bc4.png') 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://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.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;">
                        <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><br><br><br><br><br><br><br><br>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1871892042.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://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')";
});
</script>


大猫咪 发表于 2022-3-15 22:46

@驻在平安夜前夕

大猫咪 发表于 2022-3-15 22:48

小平安晚上好，刚学习会做帖 {:4_190:} 送你个古典吉他旋律 ，陪你渡过慢慢长夜。。。

{:5_117:}{:4_204:}

驻在平安夜前夕 发表于 2022-3-15 22:52

首先谢谢您{:5_108:}
然后告诉您{:5_111:}
阿拉这电脑{:5_114:}
没有带音响{:5_102:}

驻在平安夜前夕 发表于 2022-3-15 22:53

俺去找一台有音响的电脑来听{:5_114:}

驻在平安夜前夕 发表于 2022-3-15 23:01

因没啥音乐细胞之故
所以根本谈不上欣赏
但还是要衷心的感谢
感谢您辛勤的劳动{:5_108:}

驻在平安夜前夕 发表于 2022-3-15 23:02

在别人家的电脑上操作
不敢占用太久{:5_109:}

红影 发表于 2022-3-15 23:03

这里的风景真美啊，猫猫的帖子好棒。夕夕收礼开心{:4_187:}

加林森 发表于 2022-3-15 23:09

猫猫制作漂亮，赞~~~~~

樵歌 发表于 2022-3-16 07:53

猫做得越来顺手了，漂亮。{:4_190:}

大猫咪 发表于 2022-3-16 19:31

驻在平安夜前夕 发表于 2022-3-15 23:02
在别人家的电脑上操作
不敢占用太久

嗯嗯理解 ， {:4_187:} 小平安晚上好！不客气{:4_190:}

大猫咪 发表于 2022-3-16 19:32

樵歌 发表于 2022-3-16 07:53
猫做得越来顺手了，漂亮。

谢谢樵哥支持鼓励 {:5_106:}晚上好！ {:4_190:}

樵歌 发表于 2022-3-16 20:05

大猫咪 发表于 2022-3-16 19:32
谢谢樵哥支持鼓励 晚上好！

不喊樵哥哥了，有点失望呵{:4_170:}

大猫咪 发表于 2022-3-16 20:25

樵歌 发表于 2022-3-16 20:05
不喊樵哥哥了，有点失望呵

{:4_170:}嗯嗯小哥哥和樵哥哥猫都叫   {:4_170:}{:4_191:}

绿叶清舟 发表于 2022-3-16 21:05

猫这个图片配的真好{:4_204:}

大猫咪 发表于 2022-3-16 21:06

绿叶清舟 发表于 2022-3-16 21:05
猫这个图片配的真好

感觉和音乐融合就选这图了{:4_189:}

绿叶清舟 发表于 2022-3-16 21:09

大猫咪 发表于 2022-3-16 21:06
感觉和音乐融合就选这图了

融得很好了，宁静又有些浪漫的

驻在平安夜前夕 发表于 2022-3-16 21:57

大猫咪 发表于 2022-3-16 19:31
嗯嗯理解 ，小平安晚上好！不客气

互致问候{:5_112:}

大猫咪 发表于 2022-3-16 22:02

驻在平安夜前夕 发表于 2022-3-16 21:57
互致问候

{:4_204:}{:5_112:}

小九 发表于 2022-3-17 11:13

这个图图和音乐完美结合，猫咪厉害{:4_199:}
页: [1] 2
查看完整版本: 爱的罗曼斯 TO平安