《依兰爱情故事》电影主题曲
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2010933">
<div style="width: 1164px;height: 620px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:130px;margin-LEFT: -300px;">
<style>
#papa {
margin: auto;
width: 1164px;
height: 620px;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 3px 6px 12px gray;
position: relative;
z-index: 1;
--state: paused;
}
#dh{ width: 100%; height: 620px; position: absolute;
z-index: 1;background: #000000 url(https://z4a.net/images/2023/12/17/honggaoliang.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 4s linear infinite;}
@keyframes rod{
0% {opacity: 0.6;filter:hue-rotate(360deg)}
30% {opacity: 0.3;}
60% {opacity: 0.8;}
100% {opacity: 1.0;}
}
#player {
width: 80px;
height: 80px;
left: 550px;
top: 450px;
cursor: pointer;
background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/四叶草02g.png') no-repeat center/cover;
filter: hue-rotate(0deg) opacity(.9);
animation: rotating 6s linear infinite var(--state);
position: absolute;
z-index: 81;
}
li-zi { position: absolute;width: 45px; height: 65px;background: tan;
clip-path: polygon(69% 32%, 80% 30%, 86% 37%, 89% 48%, 83% 59%, 71% 57%, 27% 38%, 18% 37%, 10% 45%, 11% 57%, 18% 65%, 26% 65%, 39% 58%, 62% 35%); animation: imov 22s infinite;z-index: 2;}
@keyframes moving {
100%{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
0%{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 50%;
transform: translate(-50%);
top: 545px;
font:normal 3em 华文新魏;
font-weight:400;
color: #000080;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>
<div style="position: relative; top:-90px;LEFT: 0px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
font-size: 26px;
color: #ff0000;
position: relative;
text-align:center;
transform: translate(0%,35%);
font-weight: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
-webkit-animation:loop 3s linear 1000000;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
.tit {
position: relative;
width: 700px;
top: 100px;
left: -160px;;
font-family:迷你简细圆;
font-size: 40px;
text-shadow: 2px 2px #ff00ff;
font-weight:bold;
color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span>《依兰爱情故事》电影主题曲 </span>
<span > </span></div>
<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 950px;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:24px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div id="papa">
<div id="dh" style="animation-play-state: running;"></div>
<svg width="1164" height="620">
<filter id="spot">
<feDiffuseLighting in="SourceGraphic" surfaceScale="3" diffuseConstant="5" lighting-color="#fea1ee" id="feDiff">
<feSpotLight x="0" y="0" z="5" pointsAtX="120" pointsAtY="150" pointsAtZ="0" limitingConeAngle="55">
</feSpotLight>
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="1164" height="620" filter="url(#spot)"></rect>
</svg>
<div id="player" title="播放/暂停"></div>
<div data-lrc="" id="lrc" title="歌词显示"></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music217419408.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let all = 40;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
movBall.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
--deg: ${360 / all * i}deg;
background: #${Math.random().toString(10).substr(-6)};
animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 2}s infinite var(--state);
`;
papa.prepend(movBall);
}
let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);
})();
</script>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `《依兰爱情故事》 - 崔子格
词曲：方 磊
歌词编辑：亦是金
- - - - - -
老妹儿啊 你等会儿啊
咱俩破个闷儿啊
你猜那 我心里儿啊
装的是哪个人儿啊
美女儿啊 掉丝儿啊
他整不到一块堆儿啊
啥人儿啊 就啥命儿啊
咱俩就凑一对儿吧
你一笑啊 我刺挠啊
浑身都得劲儿啊
你一哭啊 我胆儿突啊
就掐我消消气儿吧
情人儿啊 给个信儿啊
咱俩啥前儿办事儿啊
一百年儿 一辈子儿啊
情愿你笑我呆儿啊
我活着是你的人儿啊
死了是你的鬼儿啊
你想咋地儿就啊咋地儿啊
月亮它照墙根儿啊
我为你唱小曲儿啊
看你睡啦 我心里美滋味儿啊
- - - - - -
媳妇儿啊 进门儿啊
咱俩过日子儿啊
我有情啊 你有意
生了个胖闺女儿啊
鸡毛啊 蒜皮儿啊
那都是我的事儿啊
你搂宝儿啊 座屉儿啊
天天那都有局儿啊
谁家的 爷们儿啊
藏进下屋碗架柜儿啊
你红啦 我绿儿啊
还骂我没出息儿啊
扔下孩子儿 你一转身儿
从此跑没音儿啊
唉 小妮儿啊 我宝贝儿啊
看来咱俩才是一对儿啊
我活着是你的人儿啊
死了是你的鬼儿啊
你想咋地儿就啊咋地儿啊
月亮它照墙根儿啊
我为你唱小曲儿啊
看你睡啦 我心里美滋味儿啊
我活着是你的人儿啊
死了是你的鬼儿啊
你想咋地儿就啊咋地儿啊
太阳又升一轮儿啊
映透了窗户纸儿啊
看你醒啦 我心里没滋味儿啊
日子长啊 我为你擦眼泪儿啊
-- 谢谢欣赏 --
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
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;
};
/*函数 ：处理当前歌词索引 mKey*/
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 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;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
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());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
dh.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');
</script>
</td></tr></table> 又是一个漂亮的粒子效果。这是蝴蝶结么，真漂亮{:4_199:} 这歌曲有趣，背景也很恰当。欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-12-18 09:21
又是一个漂亮的粒子效果。这是蝴蝶结么，真漂亮
问好红影！谢谢夸奖！ 本帖最后由 亦是金 于 2023-12-18 10:26 编辑
红影 发表于 2023-12-18 09:22
这歌曲有趣，背景也很恰当。欣赏亦是金老师好帖
谢谢欣赏！祝新周愉快！{:4_187:} 亦是金 发表于 2023-12-18 09:48
问好红影！谢谢夸奖！
亦是金老师真的好多的路径效果啊{:4_187:} 亦是金 发表于 2023-12-18 09:49
谢谢！
问好亦是金老师，新周快乐{:4_187:} 这首歌曲是北方的吧，都是带儿音的。 欣赏老师好帖{:4_204:} 本帖最后由 亦是金 于 2023-12-18 11:47 编辑
红影 发表于 2023-12-18 10:25
亦是金老师真的好多的路径效果啊
是的，还在陆续制作路径粒子呢！{:4_189:}
我准备做个粒子制作（clip-path: polygon）的小教程，最迟明天完工分享！{:4_205:}
红影 发表于 2023-12-18 10:25
问好亦是金老师，新周快乐
{:4_187:} 侃大山 发表于 2023-12-18 10:58
这首歌曲是北方的吧，都是带儿音的。
问好侃大山！{:4_190:} 侃大山 发表于 2023-12-18 10:59
欣赏老师好帖
谢谢欣赏！祝你欣赏愉快！{:4_190:} 这个背景深颜色感觉变色效果漂亮 歌曲也是好听{:4_208:} 欣赏佳作，感谢分享 世外桃源 发表于 2023-12-18 14:30
这个背景深颜色感觉变色效果漂亮
问好世外桃源！{:4_190:} 世外桃源 发表于 2023-12-18 14:35
欣赏佳作，感谢分享
祝你欣赏愉快！{:4_187:} 变色效果好看，画面美，小花播和音乐也很美。亦是金老师棒棒哒{:4_187:} 亦是金 发表于 2023-12-18 11:40
是的，还在陆续制作路径粒子呢！
我准备做个粒子制作（clip-path: polygon）的小教程，最迟明 ...
太好了，等着看亦是金老师好帖{:4_187:}
页:
[1]
2