尝试失败，求助马黑黑和羽儿
本帖最后由 小九 于 2022-3-15 09:09 编辑<style tpye="text/css"> #xq { position: relative; left:-204px;top:120px; width: 1000px; height: 700px; background:#333 url('https://www.huachaowang.com/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:160px; left:560px; top: 60px; text-align:center;">
<center ><p ><font color="#ffffff" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marqueescrollamount="5" direction="left" >祝你踏过千层浪，不忘少年样，也无惧白发苍苍 </marquee> <audio style="width:600px; height:64px;"controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=488664116.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('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></div><br><br><br><br><br><br><br><br>
1、用了人世间的图片，是在论坛上传的，图片地址放进代码， 最后结果是图片显示不出来2、用了羽儿的音乐代码，但不知道代码是否有误，羽儿帮忙看看
感谢{:4_187:}{:4_187:}{:4_190:}{:4_190:}
代码太多，看着就晕了
@马黑黑 @千羽 {:4_190:}{:4_190:}
不急，有空来看看。 <style tpye="text/css">
#xq { position: relative; left:-204px;top:120px; width: 1000px; height: 700px; background:#333 url('https://www.huachaowang.com/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:160px; left:560px; top: 0px; text-align:center;">
<center >
<p ><font color="#ffffff" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marqueescrollamount="5" direction="left" >祝你踏过千层浪，不忘少年样，也无惧白发苍苍 </marquee>
<audio style="width:600px; height:64px;"controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=488664116.mp3" type="audio/mpeg" hidden="true"></audio> <br></p>
<div style="position:absolute; width:120px; left:-190px; top: 320px; 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('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></div>
<br><br><br><br><br><br><br><br> 九儿，这个代码可以出来啊{:4_187:} 哈哈，那个小动图抠图不干净，在这样的背景下好明显啊{:4_189:} 散射的星星的动图在这个效果下还挺好看的。摇摆字在这里也好美{:4_187:} 挺好的嘛 红影 发表于 2022-3-15 09:23
九儿，这个代码可以出来啊
我咋整不出来，试的时候，只有特效出来，连画面都看不到，空白的一遍 本帖最后由 加林森 于 2022-3-15 11:40 编辑
小九 发表于 2022-3-15 11:34
我咋整不出来，试的时候，只有特效出来，连画面都看不到，空白的一遍
小九，你这个制作很漂亮的，就是播放器停不下来，少了一个停止的代码。<p><audio id="music" 这个就是停止代码，加在音乐地址前面就行了。 还有，你的浏览器是哪种啊？ 加林森 发表于 2022-3-15 11:36
小九，你这个制作很漂亮的，就是播放器停不下来，少了一个停止的代码。
谢谢队长{:4_187:} 小九 发表于 2022-3-15 11:53
谢谢队长
不客气的。{:4_187:}{:4_190:} 红影菇凉已经弄好了。很漂亮的制作。 加林森 发表于 2022-3-15 11:41
还有，你的浏览器是哪种啊？
浏览器是360 小九 发表于 2022-3-15 12:27
浏览器是360
我是极速360浏览器，能看见能听见的。 红影 发表于 2022-3-15 09:23
九儿，这个代码可以出来啊
好奇怪，我发出来，就是看不到图片 马黑黑 发表于 2022-3-15 12:22
红影菇凉已经弄好了。很漂亮的制作。
黑黑，那整个代码是什么呢？ 完全晕代码， 我想去掉那个播放器的特效，又在哪里弄呢？{:4_190:} 马黑黑 发表于 2022-3-15 12:22
红影菇凉已经弄好了。很漂亮的制作。
完全是瞎子，蒙的
<style tpye="text/css">
#xq { position: relative; left:-204px;top:120px; width: 1000px; height: 700px; background:#333 url('https://www.huachaowang.com/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 {
<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:160px; left:560px; top: 60px; text-align:center;">
<center >
<p ><font color="#ffffff" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marquee scrollamount="5" direction="left" >祝你踏过千层浪，不忘少年样，也无惧白发苍苍 </marquee>
<p><audio id="music"<p><audio id="music"<audio style="width:600px; height:64px;" controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1915875397.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('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></div>
<br><br><br><br><br><br><br><br>
小九 发表于 2022-3-15 13:19
完全是瞎子，蒙的
发帖时记得点击右上角的“纯文本”，再点击左下角的“附加选项”，勾选“HTML代码” 马黑黑 发表于 2022-3-15 13:22
发帖时记得点击右上角的“纯文本”，再点击左下角的“附加选项”，勾选“HTML代码”
是这样操作的，这个操作到是常用，帮我看看代码哪里有问题？{:4_190:}
页:
[1]
2