朵拉 发表于 2024-1-9 21:06

你总要学会往前走（马黑黑原创）

本帖最后由 朵拉 于 2024-1-10 14:20 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 810px); width: 1300px; height: 731px; background: lightblue url('https://pic.imgdb.cn/item/659d47f4871b83018a98fa53.jpg'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#myplayer { position: absolute; left: calc(50% - 120px); top: 10px; transition: filter 1s; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
#myplayer:hover { filter: hue-rotate(360deg); }
#vid { position: absolute; top: -70px; width: 1300px; height: 880px; object-fit: cover; mix-blend-mode: screen; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop autoplay></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2115685030" autoplay loop></audio>
      <img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/snow.webp" alt="" title="play&pause" />
</div>

<script>
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
      aud.paused
                ? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放')
                : (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停');
}
</script>

朵拉 发表于 2024-1-9 21:22

@马黑黑
马师 晚上好，学生交作业，请指正哈~~{:4_190:}

马黑黑 发表于 2024-1-9 21:35

居中设置不好。你的父元素CSS代码：

#papa { margin: 0 0 0 calc(50% - 652px); width: 1300px; height: 820px; ...}

蓝色的是父元素宽度，它要除以2然后+81 才是红色的相关数值：1300/2+81=731


辫子哥哥 发表于 2024-1-9 21:36

朵拉好，欣赏佳作{:4_187:}

小辣椒 发表于 2024-1-9 21:49

欣赏朵拉的精彩制作，图图居中修改一下更加好一点

红影 发表于 2024-1-9 22:21

很漂亮的制作，欣赏朵宝好帖{:4_187:}

梦油 发表于 2024-1-10 09:44

往前走，莫彷徨。

平凡 发表于 2024-1-10 13:52

制作漂亮{:4_178:}
页: [1]
查看完整版本: 你总要学会往前走（马黑黑原创）