小九 发表于 2022-3-15 23:40

朋友 TO: 马黑黑

本帖最后由 小九 于 2022-3-16 12:13 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-390px; top:50px; width: 1400px; height: 845px; background:#333 url('/data/attachment/forum/202203/15/233053ap16m610ogvg0mhh.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: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=152428.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>

小九 发表于 2022-3-15 23:41



@马黑黑 {:4_190:}

加林森 发表于 2022-3-16 00:02

小九制作漂亮，赞！{:4_204:}{:4_190:}

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

高山草原上开满鲜花，真漂亮{:4_204:}

红影 发表于 2022-3-16 08:54

真漂亮的制作，欣赏九儿好帖。黑黑收礼开心{:4_187:}

马黑黑 发表于 2022-3-16 09:29

小九 发表于 2022-3-15 23:41
@马黑黑

整个帖子右偏了。宽度大，外框还需要加大 left 的负值

小九 发表于 2022-3-16 12:12

马黑黑 发表于 2022-3-16 09:29
整个帖子右偏了。宽度大，外框还需要加大 left 的负值

我再试一下

加林森 发表于 2022-3-16 12:14

这个制作好，加精了！{:4_199:}

马黑黑 发表于 2022-3-16 12:29

小九 发表于 2022-3-16 12:12
我再试一下

现在好了。小九好腻害！

感谢你的礼物！{:4_187:}

小九 发表于 2022-3-16 12:44

樵歌 发表于 2022-3-16 07:57
高山草原上开满鲜花，真漂亮

樵歌中午好！ 背景图很好看哈{:4_187:}

小九 发表于 2022-3-16 12:44

红影 发表于 2022-3-16 08:54
真漂亮的制作，欣赏九儿好帖。黑黑收礼开心

谢谢影子，一起开心！{:4_187:}

小九 发表于 2022-3-16 12:45

加林森 发表于 2022-3-16 12:14
这个制作好，加精了！

谢谢队长鼓励{:4_187:}

小九 发表于 2022-3-16 12:45

马黑黑 发表于 2022-3-16 12:29
现在好了。小九好腻害！

感谢你的礼物！

你才厉害哈，我终于蒙出点点来了{:5_117:}

马黑黑 发表于 2022-3-16 12:52

小九 发表于 2022-3-16 12:45
你才厉害哈，我终于蒙出点点来了

蒙蒙就会蒙对的

加林森 发表于 2022-3-16 13:01

小九 发表于 2022-3-16 12:45
谢谢队长鼓励

应该的，全靠你自己的制作漂亮，辛苦了。{:4_204:}{:4_190:}

樵歌 发表于 2022-3-16 13:13

小九 发表于 2022-3-16 12:44
樵歌中午好！ 背景图很好看哈

貌似重庆东边有个石柱县就有这景儿。{:4_173:}

红影 发表于 2022-3-16 13:30

小九 发表于 2022-3-16 12:44
谢谢影子，一起开心！

这个真漂亮，九儿真棒{:4_187:}

小九 发表于 2022-3-16 13:34

樵歌 发表于 2022-3-16 13:13
貌似重庆东边有个石柱县就有这景儿。

应该每个地方的风景相似吧，樵歌对石柱很熟悉吗

樵歌 发表于 2022-3-16 19:59

小九 发表于 2022-3-16 13:34
应该每个地方的风景相似吧，樵歌对石柱很熟悉吗

十年前在哪儿玩了几天。{:4_173:}

马黑黑 发表于 2022-3-17 22:36

{:4_180:}
页: [1]
查看完整版本: 朋友 TO: 马黑黑