枕着光的她（马黑黑原创）
本帖最后由 朵拉 于 2024-10-28 14:49 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/65d8bb539f345e8d037387c1.jpg') no-repeat center/cover;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
display: grid; /* 网格布局 : 配合下句 */
place-items: center; /* 约束子元素绝对居中 */
position: relative; /* 相对定位 : 为绝对定位的子元素提供参照 */
}
.vid {
position: absolute;
top: -300px;
width: 100%;
height: 150%;
object-fit: cover;
mix-blend-mode: screen;
}
#player {
top: 60px;
filter: drop-shadow(0 0 8px yellow);
cursor: pointer;
animation: turn 6s linear infinite var(--state);
position: absolute;
}
@keyframes turn { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<!-- html子元素的次序 ：图片播放器要放在视频之后 -->
<audio id="aud" src="https://642301.freep.cn/642301/music/枕着光的她-水木清扬.mp3" autoplay="" loop=""></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/67/72/63db22ade2dc6.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/68/71/63e610437126a.mp4" loop muted></video>
<img id="player" src="https://638183.freep.cn/638183/small/7s.png" alt="" />
</div>
<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vidplay(false)) : (papa.style.setProperty('--state', 'running'), vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:} {:4_190:} 欣赏朵宝好帖{:4_204:} 朵拉制作漂亮播放器整体发光啊，元宵快乐
页:
[1]