希望
本帖最后由 马黑黑 于 2024-2-23 09:18 编辑 <br /><br /><style>#papa {
margin: -60px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/1/hope.jpeg') 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: 30px;
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">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29049046" 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>
本帖最后由 马黑黑 于 2024-2-23 09:17 编辑 <br /><br /><h2>代码</h2>
<div class="mum"><pre>
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/1/hope.jpeg') 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: 30px;
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://music.163.com/song/media/outer/url?id=29049046" 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>
</pre></div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script> 本帖最后由 马黑黑 于 2024-2-23 08:46 编辑
网格布局可以约束子元素的初始定位，本帖的帖子主元素使用网格布局，再用place-items属性限制子元素上下、左右都居中。
子元素在父元素的网格定位约束下，仍有自己的“活动空间”，使用绝对定位后，可以随心所欲设置 left、top 属性进行定位，可以摆脱父元素的约束。那为什么还有使用网格约束定位呢？看一下 #player 选择器就可以理解了：它只需要设定 top 属性，left不用设置（按约束定位）。
使用网格布局不是一个必须项，实现子元素精准定位会有很多方法。比如，父元素相对定位后，子元素绝对定位，在 父元素相对定位+子元素绝对定位 的模式下，子元素可以使用 left、top 等属性在父元素方位参照系里进行精准布局。 关于视频的混合样式：
.vid 选择器用于规范视频样式，本帖使用两个视频，class="vid" 指向 css 的 .vid 选择器。.vid 的 mix-blend-mode 属性值设为 screen，可以将视频的黑色背景透明化。视频纯黑的背景要纯粹，背景透明才会完全。混合滤镜对视频的作用道理同对图片的作用，均依赖色彩构成而产生各自子滤镜预设的效果，制作或选择背景视频因此大有讲究。
本帖最后由 马黑黑 于 2024-2-23 09:16 编辑 <br /><br />{:4_190:} 首席沙发，欣赏学习哈~~{:4_190:} 金光闪闪的希望，这个帖子里的视频叠合很完美，播放器的滤镜也漂亮{:4_199:} 能够找到这样相配的视频也不容易呢。欣赏黑黑好帖{:4_199:} 红影 发表于 2024-2-23 12:19
能够找到这样相配的视频也不容易呢。欣赏黑黑好帖
论坛有好几位朋友能够制作视频的 朵拉 发表于 2024-2-23 10:07
首席沙发，欣赏学习哈~~
{:4_191:} 红影 发表于 2024-2-23 12:19
金光闪闪的希望，这个帖子里的视频叠合很完美，播放器的滤镜也漂亮
播放控制元素是图片，滤镜用的是阴影滤镜，简简单单 马黑黑 发表于 2024-2-23 13:17
论坛有好几位朋友能够制作视频的
会做视频是另外的事，在帖子里完美应用，也是本事{:4_187:} 马黑黑 发表于 2024-2-23 13:18
播放控制元素是图片，滤镜用的是阴影滤镜，简简单单
这个阴影滤镜完美呼应了视频效果，相互映衬，很美的{:4_187:} 红影 发表于 2024-2-23 13:41
这个阴影滤镜完美呼应了视频效果，相互映衬，很美的
这谁都可以设计的 红影 发表于 2024-2-23 13:40
会做视频是另外的事，在帖子里完美应用，也是本事
这算啥本事 马黑黑 发表于 2024-2-23 08:52
关于视频的混合样式：
.vid 选择器用于规范视频样式，本帖使用两个视频，class="vid" 指向 css 的 .vid...
今天这两个视频的不用VID1或者2来区分，直接跟两个，这样更好控制。。{:4_199:} 小花颜色鲜艳，加上边缘黄色阴影渲染，加强后的颜色十分好看。。 南无月 发表于 2024-2-23 18:35
小花颜色鲜艳，加上边缘黄色阴影渲染，加强后的颜色十分好看。。
谢谢
南无月 发表于 2024-2-23 18:31
今天这两个视频的不用VID1或者2来区分，直接跟两个，这样更好控制。。
这叫批量控制 红影 发表于 2024-2-23 13:41
这个阴影滤镜完美呼应了视频效果，相互映衬，很美的
谢谢鼓励