本帖最后由 加林森 于 2022-4-6 13:07 编辑 <br /><br />红影 发表于 2021-10-10 11:51
希望疫情早点结束，让队长能开心去玩
嗯嗯，谢谢红影。{:4_204:}
<style tpye="text/css">
#xq { position: relative; left:-204px;top:120px; width: 1000px; height: 600px; background:#333 url('https://pic.imgdb.cn/item/622f51e15baa1a80abe70afd.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: 3rem;
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: 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="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 style="width:600px; height:64px;"controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1920941709.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');
<style>
.stage {
display: flex;
justify-content: center;
width: 760px;
height: 500px;
background: #000;
}
.light {
width: 0px;
height: 0px;
border: 12px solid;
border-color: transparent white transparent transparent;
filter: blur(1px);
opacity: .6;
transition: .5s;
transform-origin: 50% 0;
transform: scale(50,1.2);
animation: rot 8s ease infinite alternate;
}
@keyframes rot {
to { transform: rotate(-180deg) scale(40,2); }
}
</style>
<div class="stage">
<div class="light"></div>
</div>
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>
加林森 发表于 2021-10-10 12:02
嗯嗯，谢谢红影。
队长中午好{:4_204:}
红影 发表于 2021-10-10 12:34
队长中午好
红影下午好！{:4_204:}