追不上的青春TO：黑黑 （学习套用黑黑《Teyata》代码效果）
<style>
.hy {
margin: 140px 0 30px calc(50% - 778px);
width: 1369px;
height: 751px;
box-sizing: border-box;
border: 3px solid;
border-image: linear-gradient(to top right,#a506d9, #0b3c2e) 3 3;
background: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/01.jpg')
no-repeat center/cover;
z-index: 1; overflow: hidden;
pointer-events: none;
position: relative;
}
.hy::before, .hy::after {
position: absolute;
content: '';
transition: all .45s;
}
.hy::before {
inset: 0;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: hue-rotate(var(--hue));
}
.hy::after {
right: 45%;
bottom: 40px;
width: 100px;
height: 100px;
background: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/an.png') no-repeat center/cover;
transform: rotate(var(--hue));
pointer-events: auto;
cursor: pointer;
}
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) {
top: 68%;
right: 6%;
width: 350px;
height: 200px;
border-radius: 25%;
border: 4px solid #3b5c76;
}
.vid:nth-of-type(2) { top: -70px; right: -10px; width: 100%; height: 110%; mix-blend-mode: screen; opacity: .95; z-index: 10;}
.hy:hover::before { backdrop-filter: unset; }
#tit {
position: absolute;
top: -15px;
background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif '); background-size:cover;
width:350px; height:200px; left: 40px; font: bold 2.2em 微软雅黑; serif;
text-align:center; line-height:200px; color:transparent;
-webkit-background-clip:text;
solid; z-index: 10;
}
#tit2 {
position: absolute;
top: 40px;
background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif'); background-size:cover;
width:250px; height:120px; left: 100px; font: bold 1.8emserif;
text-align:center; line-height:200px; color:transparent;
-webkit-background-clip:text;
border:0px #FF4A20 solid; z-index: 10;
}
</style>
<div class="hy" id="hy1">
<div id="tit">追不上的青春</div>
<div id="tit2">TO：马黑黑</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/06/22/zbsqc.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/42/29/601b3dbaae8ae.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
</div>
<script>
var vids = hy1.querySelectorAll('.vid'); //视频变量
var mState = () => {
hy1.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => hy1.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
hy1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br> @马黑黑
感谢黑黑教程分享，辛苦了！
小辣椒也是抄的作业{:4_173:}
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif @红影
亲爱的，抄你的作业 昨天晚上一面看球赛一面做了这个帖，一个晚上基本没有怎么睡觉，中午回家眯了一下，发了帖马上下 制作精美，歌曲好听，
向小辣椒好好学习{:4_190:}{:4_204:} 画面漂亮，歌曲好听，赞！{:4_187:} 变幻色彩的雪景更美了。 这标题字加得漂亮，闪烁着光芒的感觉，太赞了。
背景也漂亮，那视频和背景人物还那么配套呢，很美好温暖的场景。
欣赏亲爱的好帖{:4_199:} 小辣椒 发表于 2024-7-30 15:08
@红影
亲爱的，抄你的作业 昨天晚上一面看球赛一面做了这个帖，一个晚上基本没有怎么睡觉，中午回家眯 ...
那么晚啊，亲爱的，你该好好休息的，别这么任性了啊{:4_179:} 这个设计非常好，给亲爱的点赞{:4_199:} 小辣椒一出手就是不同凡响 欣赏优秀作业！特别赞赏小辣椒选的音乐，部是特别契合图意。{:4_204:} 起个网名好难 发表于 2024-7-30 15:07
难难晚上好，你速度的，我下的时候都没有看见你这个回复的{:4_173:}
下午发了就下了 朵拉 发表于 2024-7-30 15:42
制作精美，歌曲好听，
向小辣椒好好学习
朵拉晚上好，现在小辣椒做作业没有你速度的，我是拉下的作业一大堆了 梦江南 发表于 2024-7-30 16:06
画面漂亮，歌曲好听，赞！
梦江南晚上好，谢谢欣赏，谢谢鼓励{:4_187:} 梦油 发表于 2024-7-30 16:25
变幻色彩的雪景更美了。
梦油晚上好，这个是黑黑的代码设置的漂亮，小辣椒就套用玩玩的 醉美水芙蓉 发表于 2024-7-30 16:54
欣赏小辣椒漂亮的制作！
问好水芙蓉，谢谢欣赏{:4_187:} 红影 发表于 2024-7-30 17:13
这标题字加得漂亮，闪烁着光芒的感觉，太赞了。
背景也漂亮，那视频和背景人物还那么配套呢，很美好温暖的 ...
亲爱的，没有你的作业我就抄不成功了{:4_173:} 红影 发表于 2024-7-30 17:14
那么晚啊，亲爱的，你该好好休息的，别这么任性了啊
昨天的赢的几个项目都上看了心惊肉跳的，看完都睡不着了，迷迷糊糊到天亮