《Forever Young》代码
帖子地址：https://www.huachaowang.com/forum.php?mod=viewthread&tid=76259帖子代码：
<style>
#tiezi { margin: 30px 0 30px calc(50% - 721px); display: grid; place-items: center; width: 1280px; height: 720px; background: #333 url('https://638183.freep.cn/638183/t24/2/61.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#tiezi::before, #tiezi::after { position: absolute; content: ''; width: 100%; height: 100%; border: 10px inset cyan; box-sizing: border-box; transition: 2s; }
#tiezi::before { left: 0; top: 0; border-color: cyan transparent transparent cyan; }
#tiezi::after { right: 0; bottom: 0; border-color: transparent cyan cyan transparent; }
#tiezi:hover::before, #tiezi:hover::after { width: 0; height: 0; }
#tiezi:hover .vid { mix-blend-mode: multiply; }
#player { position: absolute; bottom: 10px; }
#lrc { position: absolute; top: 18px; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; pointer-events: none; }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33223284" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/56/5b7b484a81b43.mp4" loop muted></video>
<canvas id="player" width="1000" height="80"></canvas>
<canvas id="lrc" width="800" height="50"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
document.body.appendChild(sF);
var colors = {track: 'snow', prog: 'cyan', lrc1: 'white', lrc2: 'cyan'};
var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
</script> 帖子实现代码的主要特色：
#tiezi 选择器的 :hover 伪类选择器共三个（第 06 行两个、07行一个），分别作用于两个伪元素的宽高尺寸、视频的 mix-blend-mode 滤镜变化。 这个边框效果在贴子里跟想象中一样的漂亮。。{:4_199:}很是喜欢。。 马黑黑 发表于 2024-5-31 08:56
帖子实现代码的主要特色：
#tiezi 选择器的 :hover 伪类选择器共三个（第 06 行两个、07行一个），分别 ...
非常协调，效果绝佳 。。。{:4_199:} 南无月 发表于 2024-5-31 12:35
非常协调，效果绝佳 。。。
感谢墙裂支持 南无月 发表于 2024-5-31 12:33
这个边框效果在贴子里跟想象中一样的漂亮。。很是喜欢。。
边框是小玩意 有空，学习下~~{:4_190:} 马黑黑 发表于 2024-5-31 13:27
边框是小玩意
小玩意，大效果{:4_199:} 马黑黑 发表于 2024-5-31 13:27
感谢墙裂支持
力度必须有了 南无月 发表于 2024-5-31 17:41
力度必须有了
感谢感谢 南无月 发表于 2024-5-31 17:41
小玩意，大效果
效果不是特大 朵拉 发表于 2024-5-31 16:56
有空，学习下~~
{:4_190:} 马黑黑 发表于 2024-5-31 17:47
感谢感谢
先感动再谢，还是谢到感动{:4_170:} 马黑黑 发表于 2024-5-31 17:48
效果不是特大
边框 效果太大就夺主了。这样纸刚刚好 南无月 发表于 2024-5-31 17:54
边框 效果太大就夺主了。这样纸刚刚好
是不能太大。不过有一些时候，专门用边框来做形状的，元素大小为0 南无月 发表于 2024-5-31 17:53
先感动再谢，还是谢到感动
都行 前面光注意边框了，原来视频也是有变化的，看到这个帖子，赶紧回去体验了一下{:4_173:} 这个帖子背景和视频十分吻合，还有边框和视频滤镜的加持，很赞{:4_199:} sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
还有这个封装啊，我咋记得画布的是圆环的进度条啊{:4_173:} 红影 发表于 2024-5-31 18:31
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
还有这个封装啊，我咋记 ...
这个比那个早