《 忘 忧 草 》 - 周华健（学习黑黑老师iooi帖渐变视频效果）
本帖最后由 亦是金 于 2025-12-9 11:14 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860773">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">
<style>
#papa {
margin: auto;
top: -83px;
left: 0px;
width: 1200px;
height: 700px;
background: url('https://s1.ax1x.com/2023/03/27/pps1r60.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;
top: 200px;
left: 0px;
width: 1200px;
height: 700px;
}
#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 white;
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: white;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent white;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004);
position: absolute;
top: 600px;
left: 380px;
font: bold 2.2em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
filter: inherit;
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes mov {to { transform: translate(var(--xx)); } }
@keyframes scale { to {transform: scale(1.5); } }
</style>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -390px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《 忘 忧 草 》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 周华健</span></div>
<div style="position: relative;width: 500px;height: 50px;top:600px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="mplayer"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=108213" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/28/5d23187daafa5.mp4" loop muted autoplay></video>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, -4, ww, hh, 0, 0, ww + 530, hh + 200);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());
})();
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;
let lrcTime = (ar) => {let tmpAr = [];for (j = 0; j < ar.length - 1; j++) {if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item, key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for (x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re, '');if (geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');let time = x.match(re);if (time != null) {for (y of time) {let tmp = y.match(/\d+/g);let sec = 0;for (z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar);}}}}lrcAr.sort((a, b) => a - b);return (lrcTime(lrcAr));}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => { for (j = 0; j < lrcAr.length; j++) { if (aud.currentTime <= lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1; let time = lrcAr - (aud.currentTime - lrcAr); showLrc(time); };
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let lrcAr = getLrcAr('《 忘 忧 草 》 - 周华健\n作词 : 陈 没\n作曲 : 宇徳敬子\n编曲 : 陈建骐\nLRC歌词编辑：亦是金\n● ● ● ● ● ●\n让软弱的我们 懂得残忍\n狠狠面对人生每次寒冷\n依依不舍的爱过的人\n往往有缘没有份\n谁把谁真的当真\n谁为谁心疼\n谁是唯一谁的人\n伤痕累累的天真的灵魂\n早已不承认还有什么神\n美丽的人生 善良的人\n心痛心酸心事太微不足道\n来来往往的你我与他\n相识不如相望淡淡一笑\n忘忧草 忘了就好\n梦里知多少\n某天涯海角\n某个小岛\n某年某月某日某一次拥抱\n青青河畔草\n静静等天荒地老\n● ● ● ● ● ●\n让软弱的我们 懂得残忍\n狠狠面对人生每次寒冷\n依依不舍的爱过的人\n往往有缘没有分\n谁把谁真的当真\n谁为谁心疼\n谁是唯一谁的人\n伤痕累累的天真的灵魂\n早已不承认还有什么神\n美丽的人生 善良的人\n心痛心酸心事太微不足道\n来来往往的你我与他\n相识不如相望淡淡一笑\n忘忧草 忘了就好\n梦里知多少\n某天涯海角\n某个小岛\n某年某月某日某一次拥抱\n青青河畔草\n静静等天荒地老\n -- 谢谢欣赏 --\n\n');
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
face.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
</td></tr></table> 我记得忘忧草是黄花菜，可以吃的呢。{:4_173:}
这个制作真漂亮，点击按钮可以让动画都停止的。欣赏亦是金老师好帖{:4_187:} 红影 发表于 2023-3-27 12:08
我记得忘忧草是黄花菜，可以吃的呢。
这个制作真漂亮，点击按钮可以让动画都停止的。欣赏亦是金 ...
问好红影，我是套用黑黑老师的代码做的！祝你欣赏愉快！{:4_187:} 这个速度快的，我刚看见黑黑分享，都还没有回帖，这里已经出来了{:4_199:} 小辣椒 发表于 2023-3-27 13:10
这个速度快的，我刚看见黑黑分享，都还没有回帖，这里已经出来了
问好小辣椒，感冒好了吗？注意休息！谢谢欣赏！{:4_187:} 亦是金 发表于 2023-3-27 13:25
问好小辣椒，感冒好了吗？注意休息！谢谢欣赏！
我在家里休息，上来看看的，谢谢关心{:4_187:} 小辣椒 发表于 2023-3-27 13:10
这个速度快的，我刚看见黑黑分享，都还没有回帖，这里已经出来了
我是看见雨中悄然《 樱花树下》帖子后，快马加鞭模仿一个！{:5_109:} 亦是金 发表于 2023-3-27 13:29
我是看见雨中悄然《 樱花树下》帖子后，快马加鞭模仿一个！
我开始也是这样的，都是套用黑黑老师的 欣赏漂亮佳作。{:4_174:} 小纽扣播放控制器改造的不错。欣赏。 樵歌 发表于 2023-3-27 18:16
欣赏漂亮佳作。
谢谢樵歌欣赏！问好！{:4_191:} 马黑黑 发表于 2023-3-27 18:19
小纽扣播放控制器改造的不错。欣赏。
谢谢老师的代码！谢谢老师夸奖！好开心！！！{:4_191:} 亦是金 发表于 2023-3-27 13:03
问好红影，我是套用黑黑老师的代码做的！祝你欣赏愉快！
做的非常漂亮呢{:4_199:} 亦是金 发表于 2023-3-27 20:34
谢谢老师的代码！谢谢老师夸奖！好开心！！！
{:4_191:}
页:
[1]