外面的世界
<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 860px; background:#333 url('/data/attachment/forum/202203/28/145026j6br79j6u92er3ee.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=473285827.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_187:} 九好制作，外面的世界现在不能乱跑了啊{:4_189:} 绿叶清舟 发表于 2022-3-28 19:25
九好制作，外面的世界现在不能乱跑了啊
哈哈，是啊，外面的世界很危险{:4_189:} 小九 发表于 2022-3-28 20:24
哈哈，是啊，外面的世界很危险
九你那还好吧 红影 发表于 2022-3-28 19:11
九儿的制作真好，那暗影里的火车意味着远去闯世界的人吧，外面的世界很精彩，外面的世界也很无奈。祝福所有 ...
影子晚上好，有点时间，听到一首老歌，所以就又开始涂抹，但背景的质量还是不能完全满意，还需要磨练。{:4_190:} 绿叶清舟 发表于 2022-3-28 20:25
九你那还好吧
目前还在可控范围，也不敢乱跑，老实呆家里，不给国家添乱{:4_189:} 小九 发表于 2022-3-28 20:26
目前还在可控范围，也不敢乱跑，老实呆家里，不给国家添乱
是啊这次与以往的不同，得特别小心了 绿叶清舟 发表于 2022-3-28 20:27
是啊这次与以往的不同，得特别小心了
就是，不能开生命的玩笑 小九 发表于 2022-3-28 20:29
就是，不能开生命的玩笑
是啊，一不小心还很多的生命呢{:4_189:} 小九 发表于 2022-3-28 20:25
影子晚上好，有点时间，听到一首老歌，所以就又开始涂抹，但背景的质量还是不能完全满意，还需要磨练。{: ...
项目九儿会抹图呢，闲来抹图也是不错的消遣{:4_187:} 图意很深不沉地描述了文字的意境。九儿制作很有韵味。{:4_173:} 还是居家好，外面有毒太危险了{:4_173:} 小九做图好快，，很漂亮的制作{:4_187:} 添加图片后，把人物擦一下就更好了{:4_181:} 小九好制作，特别是背景火车图图运用的很有感觉， 音画融合的很棒！ 赞！！！
{:4_204:}{:4_199:} 外面的世界很精彩，外面的世界很无奈
永远的齐秦 千羽 发表于 2022-3-28 21:45
添加图片后，把人物擦一下就更好了
火车图片是最后添加上去的， 我想应该是先添加火车图片，再添加人物比较好， 你说的人物摖一下，是用橡皮还是用蒙版呢，目前蒙版还不会{:4_187:} 大猫咪 发表于 2022-3-28 22:40
小九好制作，特别是背景火车图图运用的很有感觉， 音画融合的很棒！ 赞！！！
谢谢猫咪鼓励，还在摸索{:4_187:} 樵歌 发表于 2022-3-28 21:36
还是居家好，外面有毒太危险了
说的太对了{:4_189:}
页:
[1]
2