我们好幸福 （学习黑黑隐藏小播控制视频效果）
<style>#papa {
margin: 150px 0 0 calc(50% - 630px);
width: 1100px;
height: 600px;
background: url('https://pic.imgdb.cn/item/64218de4a682492fccea0e26.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid Snow;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: Snow;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent Snow;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
.txtBg {
position: absolute;
left: 440px;
top: 60px;
font-size: 2.9rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg,green,Teal, transparent,tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div class="txtBg">我们好幸福</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230327205704.mp3" loop autoplay></audio>
<video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/zgsy202.mp4" loop autoplay muted></video>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh, 0, 0, ww + 200, hh + 100);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
@马黑黑
谢谢黑黑教程，套用一个{:4_189:} 双音乐？ @走过岁月
谢谢岁月的粒子频谱，这个还没有做今天用这里了，只是用了你的链接 这个视频太独特了，观之难忘{:4_187:} 花飞飞 发表于 2023-3-27 20:48
双音乐？
偷懒了。视频音乐没有转，现在不是原视频音乐了 花飞飞 发表于 2023-3-27 20:50
这个视频太独特了，观之难忘
这个是走过岁月制作的粒子频谱效果 小辣椒 发表于 2023-3-27 20:53
偷懒了。视频音乐没有转，现在不是原视频音乐了
听到有人在哭，有人在哄{:4_173:} 小辣椒 发表于 2023-3-27 20:54
这个是走过岁月制作的粒子频谱效果
你用的十分漂亮的 花飞飞 发表于 2023-3-27 20:55
听到有人在哭，有人在哄
换原视频音乐了{:4_173:} 花飞飞 发表于 2023-3-27 20:55
听到有人在哭，有人在哄
瞎找了一首，还是重新下载了音乐，和频谱节奏感要一致 两个画面都很美的，切换很流畅{:4_187:} 小辣椒的背景图做得不错呢，调色很好，{:4_187:} 小辣椒运用的很好，赞小辣椒 走过岁月 发表于 2023-3-27 21:08
小辣椒运用的很好，赞小辣椒
鼠标滑过播放器出来，可以控制视频背景 千羽 发表于 2023-3-27 21:03
两个画面都很美的，切换很流畅
谢谢千羽{:4_171:} 小辣椒 发表于 2023-3-27 21:09
谢谢千羽
小辣椒，那么客气啊{:4_203:} 千羽 发表于 2023-3-27 21:06
小辣椒的背景图做得不错呢，调色很好，
这个图图我做了好几个图层的，本来准备单独发的，今天用了 千羽 发表于 2023-3-27 21:10
小辣椒，那么客气啊
哈哈~~~~千羽更加客气{:4_179:} 小辣椒 发表于 2023-3-27 21:09
鼠标滑过播放器出来，可以控制视频背景
看到，背景也可以变换