【春风十里】 学习帖
本帖最后由 千羽 于 2022-3-14 23:17 编辑 <br /><br /><style tpye="text/css">#xq { position: relative; left:-204px;top:120px; width: 1030px; height: 698px; background:#333 url('http://www.hongrenju.net/data/attachment/forum/202203/14/203723pcx4jo3n36o3nrp4.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: #f8c9cd;
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: 20px; 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="3" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marqueescrollamount="5" direction="left" >谢谢影子的代码，我做的很有些力不从心呢 </marquee>
<p><audio id="music"
src="http://music.163.com/song/media/outer/url?id=488664116.mp3" loop="loop" autoplay="autoplay" ></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> 抢个沙发 这个制作太惊艳了啊{:4_204:} 千羽也是速度的，一下子做出来了{:4_171:}{:4_199:} 谢谢影子的代码，有的数据不会改，勉强做出来了……{:4_181:} 千羽这个动图有白的边框，播放器按钮最好是白的背景部分，你移动一下看看效果 这个按钮音乐不能停止，千羽检查一下错误在哪里 真漂亮！ 这还力不从心啊千羽，要从心还得了，{:5_117:} 绿叶清舟 发表于 2022-3-14 21:51
抢个沙发
清舟来了，{:4_187:} 有趣，这春风十里几个字摇摆起来倒也风情万种呢，真漂亮{:4_187:} 绿叶清舟 发表于 2022-3-14 21:51
这个制作太惊艳了啊
随便找了个图，裁好尺寸，换首歌，微调了个别位置……{:4_173:} 千羽 发表于 2022-3-14 21:57
随便找了个图，裁好尺寸，换首歌，微调了个别位置……
很漂亮啊，那人物特有味道 小辣椒 发表于 2022-3-14 21:53
千羽这个动图有白的边框，播放器按钮最好是白的背景部分，你移动一下看看效果
小辣椒，我用的是影子的动图，想省点事，想调位置但左距的代码是另一种我不熟悉的，没法改呢……{:4_201:} 小辣椒 发表于 2022-3-14 21:53
千羽这个动图有白的边框，播放器按钮最好是白的背景部分，你移动一下看看效果
估计是我调了位置，代码有变动，我去回位{:4_203:} 小辣椒 发表于 2022-3-14 21:54
这个按钮音乐不能停止，千羽检查一下错误在哪里
小辣椒，刚才我还原了代码，还是不行……{:4_201:} 大猫咪 发表于 2022-3-14 21:54
真漂亮！ 这还力不从心啊千羽，要从心还得了，
没有猫咪巧手啊，用了九牛二虎之力，还是不成功{:4_203:} 红影 发表于 2022-3-14 21:57
有趣，这春风十里几个字摇摆起来倒也风情万种呢，真漂亮
哈哈，是照你的代码做的啊，按钮还没学好{:4_173:} 这个图图美{:4_187:} 绿叶清舟 发表于 2022-3-14 21:59
很漂亮啊，那人物特有味道
是以前做的图{:4_181:} 小九 发表于 2022-3-14 22:16
这个图图美
小九来了，送花花{:4_187:}{:4_204:}