《 花 房 姑 娘 》-- 赵鹏/惊堂木乐队
本帖最后由 亦是金 于 2025-11-22 17:48 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1890139">
<style>
#papa {
margin: 10px-310px;
place-items: center;
width: 1200px;
height: 700px;
border: 6px solid rgba(36, 201, 219,.95);
border-radius: 20px;
background: #000000 url('')no-repeat center/cover;
display: grid;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#bjtp{
position: absolute;
top: 90%;
left: 80%;
width: 23%;
height: 15%;
z-index:3;
hue-rotate(280deg);
}
#tp1{
place-items: center;
width: 100%;
height: 100%;
left: 0%;
top:0%;
user-select: none;
position: absolute;
z-index: 1;
mix-blend-mode:lighten;
}
#tp2{
width: 350px;
display: grid;
height: 250px;
left: 75%;
top:40%;
position:absolute;
transform: rotateY(180deg);
z-index: 5;
opacity: 1;
mix-blend-mode:lighten;
}
#tp3{
width: 0%;
height: 60%;
left: 0%;
top:-10%;
position:absolute;
opacity: 1;
z-index: 3;
}/*竹枝小鸟*/
#tp4{
width: 65%;
height: 40%;
left: 0%;
top:50%;
position:absolute;
opacity: 1;
z-index: 3;
mix-blend-mode:lighten;
}
#ptpt{
width: 100%;
height: 100%;
display: grid;
left: 0%;
top:0%;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(242, 9, 9, 0) 28%,rgba(255, 2, 2, 0.62) 65%);
position:absolute;
z-index: 4;
opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{
0%{filter:hue-rotate(360deg);}
100%{filter:hue-rotate(0deg)}
}
li-zi {
z-index: 4;
top:1600px;
left: 0px;
position:absolute;
background: url('https://www.emojiall.com/images/60/huawei/1f338.png')0 0/cover;
offset-path: path('M10 400 C600 -355, 494 196, 1200 220');
offset-distance: 0;
animation: move 15s linear infinite var(--state), rotating 5s infinite var(--state);
}/*白云*/ /*offset-path: path('M0 250 Q100 0 1140 20');*/
@keyframes move { to { offset-distance: 100%; filter:hue-rotate(10deg)contrast(100%)brightness(200%);}
}
#mplayer {
position: absolute;
grid-template-columns: auto auto auto;
gap: 28px;
display: grid;
place-items: center;
color: var(--color);
font: normal 12px sans-serif;
z-index:999;
--ww: 900px;
--color: #ffffff;
--btn_size: 40px;
--track: #ffffff;
--prog: #ff0000;
}
#btnplay {
--state: paused;
margin-right: 0px;
font: bold var(--btn_size) / var(--btn_size) serif;
width: 90px;
height: 90px;
cursor: pointer;
animation: rot 4s infinite linear;
animation-play-state: var(--state);
background: url(https://s1.ax1x.com/2023/02/28/ppCT07F.png)no-repeat center/cover;
}
@keyframes rot { to { transform: rotate(-1turn); } }
#prog {
--xx: 0px;
width: var(--ww);
height: 2px;
border-radius: 8px;
background: var(--track);
position: relative;
cursor: pointer;
}
#prog::before {
position: absolute;
content: '';
width: var(--xx);
height: 100%;
border-radius: 8px;
background: var(--prog);
}
@keyframes cover1{
0%{opacity: 1;width: 0%;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0px);}}
@keyframes cover2 {
0%{width: 0%;opacity: 1;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)} 20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0%);}}
#lrc {
--motion: cover2;
--tt: 2s;
--state: paused;
--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));
position: absolute;
left: 0%;
top:0%;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font:normal 3.4em 华文新魏;
color:#0000;
z-index:100;
-webkit-background-clip: text;
white-space: pre;
transform: translate(-30%, 10px);
transition-timing-function: cubic-bezier(0.125, 0.830, 0.905, 0.225);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
color: transparent;
width: 100%;
height: 100%;
white-space: pre;
background:#880000;
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
</style>
<div id="papa">
<div id="bjtp"><img id="Img" src="https://z4a.net/images/2024/12/31/ysjzxyy.png" width="80%" height="80%"></div>
<div id="ptpt"></div>
<div id="tp1">
<img id="pp1"src="https://upfile.mp3.wf/view.php/cefc661a2591ca18479ec168962ec897.gif" width="100%" height="100%"></div>
<div id="tp2">
<img id="pp2"src="https://pic.imgdb.cn/item/64f84335661c6c8e54f84cc0.gif" width="100%" height="100%"></div>
<div id="tp3">
<img id="pp3"src="https://pic2.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif" width="100%" height="100%"></div>
<div id="tp4">
<img id="pp4"src="https://upfile.mp3.wf/view.php/44e216a3d9326300acea70bf4dfb0e97.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer">
<span id="btnplay"></span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/5d/8e/e6/edb99a3b0380559d4a24edec6de3a7b1/audio.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');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 < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 10px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 6px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3600);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 0, offset = 0;
let geci = `《 花 房 姑 娘 》
词曲：崔 健
演唱：赵鹏/惊堂木乐队
歌词编辑：亦是金
- - - - - -
我独自走过你身旁
并没有话要对你讲
我不敢抬头看着你
噢脸庞
你问我要去向何方
我指着大海的方向
你的惊奇像是给我
噢 赞扬
你问我要去向何方
我指着大海的方向
你问我要去向何方
我指着大海的方向
你带我走进你的花房
我无法逃脱花的迷香
我不知不觉忘记了
噢 方向
你说我世上最坚强
我说你世上最善良
我不知不觉已和花儿
噢 一样
你说我世上最坚强
我说你世上最善良
你说我世上最坚强
我说你世上最善良
- - - - - -
你带我走进你的花房
我无法逃脱花的迷香
我不知不觉忘记了
噢 方向
你说我世上最坚强
我说你世上最善良
我不知不觉已和花儿
噢 一样
你要我留在这地方
你要我和它们一样
我看着你默默地说
噢 不能这样
我想要回到老地方
我想要走在老路上
这时我才知离不开你的
噢 姑娘
我就要回到老地方
我就要走在老路上
我明知我已离不开你
噢 姑娘
- - 谢谢欣赏 - -
`;
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6));top:75%; left: 40%',
player_css: '--ww: 500px;top:85%;left: 20%;',
btn_txt: '',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: -220px;font:normal 2.1em 华文隶书;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://www.qqmc.com/mp3/music274712607.mp3';
}
})();
ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image1.style.opacity = '';image2.style.opacity = '';image3.style.opacity = '';image4.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementById("testImg"),
image1 = document.getElementById("pp1"),
image2 = document.getElementById("pp2"),
image3= document.getElementById("pp3"),
image4= document.getElementById("pp4"),
button = document.getElementById("mplayer");
button.onclick = function() {
if (this.value == '') {
image1.play(); image2.play(); image3.play(); image4.play();
this.value = '.';
} else {
image1.stop(); image2.stop(); image3.stop(); image4.stop();
this.value = '';
}
};
</script>
<script>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused')) :
(pa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
Array.from({length: all=10}).forEach(star => {
var size = 30 + Math.floor(Math.random() * 20);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 40 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4 };
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>
</td></tr></table>
<DIV style="HEIGHT: 50px">
动画制作得到了小辣椒管理的悉心指导帮助！致谢小辣椒管理！{:4_187:} 这么多漂亮的动态和效果呢，还有漂亮的频谱。欣赏亦是金老师好帖{:4_199:} 粒子的路径设计也很漂亮。除了粒子，其他的动图在暂停时候都是被第一帧代替的，不是停在当时的形态呢{:4_204:} 红影 发表于 2024-3-18 21:56
这么多漂亮的动态和效果呢，还有漂亮的频谱。欣赏亦是金老师好帖
问好红影！谢谢欣赏点赞！{:4_187:} 红影 发表于 2024-3-18 22:01
粒子的路径设计也很漂亮。除了粒子，其他的动图在暂停时候都是被第一帧代替的，不是停在当时的形态呢{:4_20 ...
谢谢点评！{:4_187:} 亦是金 发表于 2024-3-18 22:18
问好红影！谢谢欣赏点赞！
客气了，应该谢谢亦是金老师带来的好帖才是{:4_187:} 亦是金 发表于 2024-3-18 22:20
谢谢点评！
这么客气啊。问好亦是金老师，新周快乐{:4_187:} 好漂亮真实的音画作品呵。{:4_199:} 红影 发表于 2024-3-18 23:09
这么客气啊。问好亦是金老师，新周快乐
早上好！{:4_187:} 樵歌 发表于 2024-3-19 07:09
好漂亮真实的音画作品呵。
问好管理！谢谢欣赏点赞！{:4_180:} 亦是金 发表于 2024-3-19 10:41
问好管理！谢谢欣赏点赞！
做得是越来越好越有创意了，达到返朴归真的境界呢 亦是金 发表于 2024-3-19 10:40
早上好！
亦是金老师好，祝开心快乐{:4_187:} 前辈特棒~~~{:4_178:}
动图做的非常漂亮，还可以拉小尺寸，起点缀作用会更加漂亮 前辈会综合各种元素，无论代码和素材，确实也是高手的{:4_178:} 感谢精彩的分享，小辣椒欣赏加学习{:4_187:} 亦是金 发表于 2024-3-18 21:31
动画制作得到了小辣椒管理的悉心指导帮助！致谢小辣椒管理！
前辈客气了，你是一点就通的人哦{:4_199:} 小辣椒 发表于 2024-3-20 12:05
前辈特棒~~~
动图做的非常漂亮，还可以拉小尺寸，起点缀作用会更加漂亮
问好！谢谢指导，下次做帖采纳。{:4_187:} 小辣椒 发表于 2024-3-20 12:06
前辈会综合各种元素，无论代码和素材，确实也是高手的
我只是套用诸多老师的代码，胡拼乱凑个帖子而已。你的夸奖我不敢当，我会脸红的！{:4_197:} 小辣椒 发表于 2024-3-20 12:08
前辈客气了，你是一点就通的人哦
致谢小辣椒帮助指导！{:4_187:}
页:
[1]