《虞美人》-- 弹奏：马常胜
本帖最后由 加林森 于 2022-5-18 13:52 编辑 <br /><br /><style tpye="text/css">#xq { position: relative; left:-204px;top:120px; width: 1000px; height: 600px; background:#333 url('https://pic.imgdb.cn/item/6232dac05baa1a80abb3a02c.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: 2rem;
font-weight: bold;
color: #FF00FF;
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: 80px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.gif') no-repeat;
cursor: pointer;
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:120px; top: 20px; ">虞美人 - 弹奏：马常胜</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
<img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2FcWuqgC0BIfr8TILoi5vcIQMk9N6udkJr.gif&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?"/>
<div style="position:absolute; width:160px; left:160px; top: -30px; text-align:center;">
<center >
<p ><font color="#FFB6C1" size="3" >
<div style="color:#FFB6C1;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marqueescrollamount="5" direction="left" >春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。虞美人--李煜</marquee>
<p><audio id="music" style="width:600px; height:64px;"controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=136901.mp3" type="audio/mpeg" hidden="true"></audio>
<br></p>
<div style="position:absolute; width:120px; left:110px; top: 250px; text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
</div>
</div>
</div>
<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/12/19/20220312194526771-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.gif')";
})
</script></div>
<br><br><br><br><br><br><br><br> 制作好漂亮。只是滚动字在人肩上不太好呢。还有按钮怎么按不动啊{:4_187:} 红影 发表于 2022-3-17 15:16
制作好漂亮。只是滚动字在人肩上不太好呢。还有按钮怎么按不动啊
现在红影再来看看，我调整了位子。小丫头又跑到前面来了，看美人呢。{:4_189:} 红影 发表于 2022-3-17 15:16
制作好漂亮。只是滚动字在人肩上不太好呢。还有按钮怎么按不动啊
原来那个小人儿是音乐按钮呀 加林森 发表于 2022-3-17 17:26
现在红影再来看看，我调整了位子。小丫头又跑到前面来了，看美人呢。
嗯嗯，现在可以了，按上去可以停了。 小九 发表于 2022-3-17 17:37
原来那个小人儿是音乐按钮呀
是啊，九儿刚知道啊{:4_173:} 哈哈，这小娃娃就像是哪吒出世，队长就像是师傅了 红影 发表于 2022-3-17 18:30
嗯嗯，现在可以了，按上去可以停了。
现在又完成一个了。小丫头看大美女。{:4_189:} 上海朝阳 发表于 2022-3-17 18:38
哈哈，这小娃娃就像是哪吒出世，队长就像是师傅了
哈哈，挺好玩的。 好看的古仕女，队长狠会选图，音乐也好听{:4_187:} 这图的像素有点丢失，小图放大的{:4_173:} 千羽 发表于 2022-3-17 19:01
好看的古仕女，队长狠会选图，音乐也好听
千羽晚上好，我是先听音乐再去找图，然后就自己加工制作。今天又跑去找了两个蝴蝶出来放进来玩。 千羽 发表于 2022-3-17 19:04
这图的像素有点丢失，小图放大的
就是，忘记怎么制作了。{:5_102:} 加林森 发表于 2022-3-17 19:05
千羽晚上好，我是先听音乐再去找图，然后就自己加工制作。今天又跑去找了两个蝴蝶出来放进来玩。
队长现在做代码图很娴熟了，赞一个{:4_187:} 加林森 发表于 2022-3-17 19:07
就是，忘记怎么制作了。
不明显，还是挺好的{:4_181:} 千羽 发表于 2022-3-17 19:11
队长现在做代码图很娴熟了，赞一个
谢谢千羽支持的。{:4_204:}{:4_190:} 加林森 发表于 2022-3-17 19:12
谢谢千羽支持的。
不客气哈{:4_204:} 千羽 发表于 2022-3-17 19:12
不客气哈
嗯嗯。{:4_190:} 千羽 发表于 2022-3-17 19:12
不明显，还是挺好的
本来选了一大群的，我怕影响主图就没有放这么多进来。 加林森 发表于 2022-3-17 19:14
本来选了一大群的，我怕影响主图就没有放这么多进来。
哈哈，一大群{:4_173:}