《恋采依》 - 谢 军
本帖最后由 亦是金 于 2025-12-28 09:47 编辑 <br /><br /><style>#papa {
margin-top: 120px;
left: calc(50% - 81px);
transform: translateX(-50%);
width: 1164px;
height: 620px;
background: gray url('https://upfile.mp3.wf/view.php/baecb2b64f738471bd9cd6a7b647ab30.gif') no-repeat center/cover;
border-radius: 22px;
border: thick double#88abfa;
overflow: hidden;
z-index: 1;
position: relative;
}
#mplayer {--ww: 300px;--hh: 160px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:-120px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 10;}
.mLine {position: relative;margin: 0 1px 0 0;width: 4px;height: 8px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: .95;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
#picBtn { position: absolute; left: 750px; bottom: 60px; width: 250px; height: 250px; background: url('https://upfile.mp3.wf/view.php/fc6f1793b29b9401fcd8aae1684a7d24.png')0 0/100% 100%; cursor: pointer; z-index: -1; animation: rot linear 40s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(-150deg);}
@keyframes rot {
0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg)scale(0.4);}
15% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(1.1);left: 400px;}
30% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(1.1);left: 500px;}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.4);left: 30px;}
75% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-240deg)scale(1.0);left: 330px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-700deg)scale(0.4);top:-20px;}
}
#mpic { position: absolute;
top: 0px;
left: 0px;
width: 1164px;
height: 620px;
animation: fly 100s linear infinite;
cursor: pointer;
opacity: 0.5; }
@keyframes fly {from {
background-position: 0 0;
filter: hue-rotate(-360deg)
}
to {
background-position: 100px 1600px;
}
}
#mpicc { position: absolute;
top: 0px;
left: 0px;
width: 1164px;
height: 620px;
animation: tot 80s linear infinite;
cursor: pointer;
opacity: 0.6; }
@keyframes tot {from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1600px 300px;
}
}
#tx { position: absolute;
top: 0px;
left: 0px;
width: 1164px;
height: 620px;
animation: tx 2s linear infinite;
cursor: pointer;
}
@keyframes tx {from {filter: hue-rotate(0deg);
}
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
#img_border{display:inline-block;width:1164px;height:620px;position: absolute;top:0px; left:0px;z-index: 40;}
#dt2{ position: absolute; width: 400px; height: 350px; top: 280px; left: 800px; }
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>
<div style="position: relative;width: 500px;height: 50px;top:755px;LEFT: 700px;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>
<div id="papa">
<img id="dt2" src="https://upfile.mp3.wf/view.php/643b83ae5d2815151958bb43f2f9824f.gif" alt="" />
<imgid="mpicc"style="width: 100%; height: 100%;background: url(http://pan.yinhuabbs.cn/view.php/e728796b452e541155fb0a1535adb80d.pn)0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(http://pan.yinhuabbs.cn/view.php/e728796b452e541155fb0a1535adb80d.pn)0 0/50% 50%" >
<div id="picBtn" ></div>
<div class="bg"><div id="tx">
<div id="" style="width: 1164px; height: 160px;z-index: 20;position: absolute;top:540px; left:50px;"> <!--歌词设置有关数据-->
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div>
<div id="img_border" ><imgstyle=""></div>
<div id="mplayer"></div></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1888404991" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.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;};};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({
ypData: ypData,
player_css: '--ww: 120%; --hh: 22%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
});
})();
</script>
<style>
.bg{width: 1px;height: 1px;
margin: 0;position: absolute;top:0px; left:0px;}
#aud{
width: 250px;
display: block;
margin: 0 auto;}
.btn{
display: block;
margin: 0;}
.lrc{
width: 960px;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:0px; left:0px;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 35px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 50px;
color: #ff0000;
font-weight: bold}
</style>
<script >var lrc = `《恋采依》 - 谢 军
作词 : 金麦田文化
作曲 : 金麦田文化
演唱 ：谢 军
歌词同步：亦是金
。。。。。。
恋着山里的微风
恋着城里的霓虹
恋着你迷人的眼睛
就恋上了天上的流云
那天竹林采风
未曾想遇见你
鸟儿在山间 欢唱
飘来花的清香
能不能 在这青山小路旁
我和你 再相遇
一起看 美丽的风景
诉心语 童年的回忆
你看着我
我望着你
天空还飘着小雨
你穿恋采依的样子
格外美丽
。。。。。。
恋着山里的微风
恋着城里的霓虹
恋着你迷人的眼睛
就恋上了天上的流云
那天竹林采风
未曾想遇见你
鸟儿在山间欢唱
飘来花的清香
能不能在这青山小路旁
我和你 再相遇
一起看 美丽的风景
诉心语 童年的回忆
你看着我
我望着你
天空还飘着小雨
你穿恋采依的样子
格外美丽
-- 谢谢欣赏 --
-
-
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');
mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
picBtn.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => picBtn.style.animationPlayState = 'running');
aud.addEventListener('pause', () => picBtn.style.animationPlayState = 'paused');
img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
</script>
欣赏老师精美的音画《恋采依》。 梦江南 发表于 2025-12-16 17:19
欣赏老师精美的音画《恋采依》。
问好梦江南老师！谢谢欣赏！{:4_180:} 欣赏美帖！ 欣赏佳作，很喜欢的歌曲，制作精美。欣赏学习！祝制作愉快~~{:4_204:}{:4_190:}
也曾年轻 发表于 2025-12-16 18:16
欣赏美帖！
问好老师！谢谢欣赏！{:4_180:} 霜染枫丹 发表于 2025-12-16 18:32
欣赏佳作，很喜欢的歌曲，制作精美。欣赏学习！祝制作愉快~~
问好霜染枫丹老师！谢谢欣赏点赞！{:4_180:} 亦是金 发表于 2025-12-16 18:47
问好霜染枫丹老师！谢谢欣赏点赞！
别叫老师，我听您的歌也是很多年了，不管在哪里，只要看到了您的ID发帖,就敢放心的点击，您选的歌总是热情阳光。完全能放心的去听。感谢你的分享，祝冬安！！{:4_204:}{:4_190:}{:4_178:}
来欣赏亦是金的精品佳作！
音画太棒了！
视频唯美
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 漂亮的频谱，还有那么多动态效果，有瀑布飞溅，还有溪流，雨丝以及树上的灵动的鸟儿。
欣赏亦是金老师好帖{:4_199:} 欣赏亦是金老师好制作{:4_187:} 按钮会全屏上面飘动 还会变大小，冬雨不会以后套用就找亦是金老师的代码了