加林森 发表于 2021-12-23 20:31
我先在另外的地方试了的，可以听见才发出来的。
队长可以听到的，但播放器黑的感觉整体不够美观了
本帖最后由 加林森 于 2022-4-25 17:54 编辑 <br /><br />小辣椒 发表于 2021-12-23 22:46
队长可以听到的，但播放器黑的感觉整体不够美观了
我现在还不知道怎么改啊
<style>
.papa { left:-214px; width: 1024px; height: 700px; position: relative; background-color: #eee; }
.papa::before { content: ''; position: absolute; width: 8px; height: -200px; left: calc(10% - 4px); top: 180%; background: #2f4f4f; }
.fan { position: absolute; width: 100px; height: 100px; left: 200(50% - 50px); top: 300(50% - 50px);cursor: pointer; animation: rot .25s linear infinite; }
.fan::before, .fan::after { content: ''; position: absolute; background: #c60046; }
.fan::before { width: 100%; height: 10px; left: calc(50% - 50px); top: calc(50% - 5px); }
.fan::after { width: 10px; height: 100%; left: calc(50% - 5px); top: calc(50% - 50px); }
.papa img { position: absolute; border: 20; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div class="papa">
<img style="left:0; bottom: 0; width: 200px; z-index: 10;" src="https://pic.imgdb.cn/item/62666c06239250f7c5516244.png" alt="" />
<img style="top: 0; right: 0; width: 1024px; transform:mix-blend-mode: multiply;" src="https://pic.imgdb.cn/item/62666748239250f7c546787d.jpg" alt="" />
<div class="fan"></div>
</div>
<script>
let papa = document.querySelector(".papa");
let fc = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/25/45766cf9a96efe9ed6ec732df9fddb0d.mp3";
let flag = true;
au.autoplay = flag;
au.loop= true;
fc.appendChild(au);
chgc();
let cc = setInterval(chgc, 6000);
papa.onclick = function(){
flag ? (fc.style.animationPlayState = "paused", au.pause(), flag = false) :
(fc.style.animationPlayState = "running", au.play(), flag = true);
}
function chgc(){
let c1 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
let c2 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
papa.style.background = `linear-gradient(120deg,${c1},${c2})`;
}
</script>
<div style="margin:4px auto;background:#444;padding:8px;border:15px solid transparent; border-image:url('https://www.80wp.com/wj/3015090/7c5ce99ed58985f90c7484e2184c05e7.jpg') 30 30 stretch;">
<audio src="https://www.80wp.com/wj/3015085/adfaa2cee796fac12a7525ed3b581662.mp3" controls="controls"></audio>
<img alt="一直很安静--葫芦丝" style="float:right;width:220px;height:146px;margin:16px;" src="https://www.80wp.com/wj/3015090/7c5ce99ed58985f90c7484e2184c05e7.jpg"><br>
<p style="font-family:微软雅黑;font-size:16px;color:#eee;">
艺术家 阿桑 推荐时间 2011-04-17 13:28:49 试听次数 12377 音乐风格 流行 包含乐器 钢琴 其它 <br>一直觉得这首用钢琴弹出来会比较有感觉，但听到葫芦丝之后觉得也不赖啊，O(∩_∩)O~不过葫芦丝吹出来的，悲伤少了很多~~</p>
</div>
代码调整：
<div style="margin:4px auto;background:#444;padding:8px;border:15px solid transparent; border-image:url('https://www.80wp.com/wj/3015090/7c5ce99ed58985f90c7484e2184c05e7.jpg') 30 30 stretch;">
<audio src="https://www.80wp.com/wj/3015085/adfaa2cee796fac12a7525ed3b581662.mp3" controls="controls"></audio>
<img alt="一直很安静--葫芦丝" style="float:right;width:220px;height:146px;margin:16px;" src="https://www.80wp.com/wj/3015090/7c5ce99ed58985f90c7484e2184c05e7.jpg"><br>
<p style="font-family:微软雅黑;font-size:16px;color:#eee;">
艺术家 阿桑 推荐时间 2011-04-17 13:28:49 试听次数 12377 音乐风格 流行 包含乐器 钢琴 其它 <br>一直觉得这首用钢琴弹出来会比较有感觉，但听到葫芦丝之后觉得也不赖啊，O(∩_∩)O~不过葫芦丝吹出来的，悲伤少了很多~~</p>
</div>
马黑黑 发表于 2021-12-23 23:34
艺术家 阿桑 推荐时间 2011-04-17 13:28:49 试听次数 12377 音乐风格 流行 包含乐 ...
这个不能自动播放，需要手动的啊。
马黑黑 发表于 2021-12-23 23:35
代码调整：
谢谢老黑！{:4_190:}
加林森 发表于 2021-12-24 11:25
谢谢老黑！
客气客气
加林森 发表于 2021-12-24 11:24
这个不能自动播放，需要手动的啊。
在 audio 标签加入 autoplay="true" 即可
马黑黑 发表于 2021-12-24 12:16
客气客气
应该的应该的
马黑黑 发表于 2021-12-24 12:19
在 audio 标签加入 autoplay="true" 即可
现在可以了，谢谢老黑！{:4_190:}
加林森 发表于 2021-12-24 12:41
现在可以了，谢谢老黑！
不客气。我一般不喜欢自动播放，所以开始没加上
马黑黑 发表于 2021-12-24 13:46
不客气。我一般不喜欢自动播放，所以开始没加上
嗯嗯，知道了。
加林森 发表于 2021-12-24 16:40
嗯嗯，知道了。
我学过前端开发，一个理念是尊重访客，不扰民。我也不知道对不对。
马黑黑 发表于 2021-12-24 19:26
我学过前端开发，一个理念是尊重访客，不扰民。我也不知道对不对。
对的对的
加林森 发表于 2021-12-24 19:42
对的对的
也许吧
马黑黑 发表于 2021-12-24 19:50
也许吧
当然对啦{:4_191:}敬你！
我才不管汇报什么~~好听才是硬道理~~好好好{:5_116:}
杨柳青 发表于 2021-12-24 20:09
我才不管汇报什么~~好听才是硬道理~~好好好
小青青上来啦！晚上好！{:4_190:}
加林森 发表于 2021-12-24 20:00
当然对啦敬你！
谢谢
加林森 发表于 2021-12-24 20:13
小青青上来啦！晚上好！
晚上好~~{:5_108:}