Forever Young
<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>
占位 老师 六一快乐~~{:4_204:}{:4_190:} 鼠标移动到贴子上，边框会变化缩小到一个点。。
边框色和歌词小播完全一致，看着非常协调。。
{:4_199:} 视频好看，歌曲好听。。
六一节快乐。。童心向水，永葆青春。。{:4_170:} 南无月 发表于 2024-5-31 12:30
视频好看，歌曲好听。。
六一节快乐。。童心向水，永葆青春。。
{:4_181:} 朵拉 发表于 2024-5-31 11:53
老师 六一快乐~~
同乐同乐 南无月 发表于 2024-5-31 12:29
鼠标移动到贴子上，边框会变化缩小到一个点。。
边框色和歌词小播完全一致，看着非常协调。。
看着真仔细 新颖、活泼、漂亮！也祝老师永远年轻哈{:4_204:}儿童节快乐{:4_173:} 马黑黑 发表于 2024-5-31 13:28
看着真仔细
跟例题效果不一样。。
一下子就看到了。。{:4_173:} 马黑黑 发表于 2024-5-31 13:28
{:4_170:}快乐水吧 南无月 发表于 2024-5-31 17:41
快乐水吧
嗯呐 南无月 发表于 2024-5-31 17:40
跟例题效果不一样。。
一下子就看到了。。
可以自己设计一下的 执著 发表于 2024-5-31 17:08
新颖、活泼、漂亮！也祝老师永远年轻哈儿童节快乐
同乐同乐 昨天讲的边框效果在帖子里的直接运用，这个真漂亮{:4_199:} 明天就是儿童节了，祝福所有的大朋友小朋友儿童节快乐{:4_199:} 祝贺节日的帖子，高亮起来{:4_205:} 红影 发表于 2024-5-31 18:22
祝贺节日的帖子，高亮起来
{:4_190:} 红影 发表于 2024-5-31 18:21
昨天讲的边框效果在帖子里的直接运用，这个真漂亮
可以一看吧 红影 发表于 2024-5-31 18:21
明天就是儿童节了，祝福所有的大朋友小朋友儿童节快乐
蟹蟹