播放器和图片是分离的
我该怎么调？
<style>
.papa { left: -100px; width: 900px; height: 600px; 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/62652f92239250f7c5ae0fff.png" alt="" />
<img style="top: 0; right: 0; width: 900px; transform:mix-blend-mode: multiply;" src="https://pic.imgdb.cn/item/6265306f239250f7c5b096fb.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 = "https://music.163.com/song/media/outer/url?id=5257658.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>
加林森 发表于 2022-2-5 23:10
我该怎么调？
我发了一个新帖，上面有说明。
你还是没分清代码的结构。播放器HTML应该包含在你帖子HTML代码之中，或和它们是并列存在，然后处理好位置关系 马黑黑 发表于 2022-2-5 23:14
我发了一个新帖，上面有说明。
你还是没分清代码的结构。播放器HTML应该包含在你帖子HTML代码之中，或 ...
好的好的，我再去看看。 红影 发表于 2022-2-5 20:55
祝队长成功
这个是我拍摄的照片。 加林森 发表于 2022-2-5 20:57
现在应该算是成功了。
音乐很好听呢{:4_187:} 队长学习很努力哦，这个是前面做的{:4_178:} 小辣椒 发表于 2022-2-6 16:19
队长学习很努力哦，这个是前面做的
是的，我在复习的。 红影 发表于 2022-2-6 15:18
音乐很好听呢
是的是的 加林森 发表于 2022-2-6 16:33
是的，我在复习的。
队长我不能时间长，先下了，队长辛苦，每天发这么多帖{:4_179:} 小辣椒 发表于 2022-2-6 16:34
队长我不能时间长，先下了，队长辛苦，每天发这么多帖
不辛苦的。陪大家玩就得这样。好的，你去休息吧。 活学活用 四海八荒 发表于 2022-2-6 18:39
活学活用
就是就是。四海晚上好！新年好！{:4_190:}
页:
1
[2]