网络新歌《雪线之上》——深情致敬戍边军人！（刀郎曲、文武可可词）
<style>
#papa {position:relative; margin:90px auto 45px calc(50% - 881px); width:1600px;height:900px; box-shadow:3px 3px 20px #000; z-index:1; display:grid; place-items:center;overflow: hidden;}
#mdiv {z-index: 10; --size: 0px; --color: teal; position: relative; left: calc(-35% - var(--size) / 2); top: 230px; width: var(--size); height: var(--size);display: grid; place-items: center; animation: rot 8s linear infinite ; cursor: pointer;}
#mdiv::before, #mdiv::after { position: absolute; content: '';width: 0; height: 0; border-style: solid; border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px); border-color: var(--color) transparent; border-radius: 100% 100% 100% 100%; filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity:.3; cursor: pointer; z-index: 111}
#vid {position:absolute; z-index: 2;width:100%; height:100%; object-fit:cover; mix-blend-mode:soft-light; margin-top:0px; transform:rotateX(0deg); pointer-events:none;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #FF0000, #FF0000, #FF0000);position: absolute;z-index: 6;left: 50%; top: 78%;transform: translate(-50%);font:normal 4em STKaiti; font-weight:700; color:#FF0000; white-space:pre; -webkit-background-clip:text; filter:drop-shadow(#FFFFFF 2px 0 0)drop-shadow(#FFFFFF 0 2px 0)drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#aud{position: absolute; top: 10px; left:10px;opacity:0.1;}
</style>
<div id="papa">
<div id="mdiv" title="">❤️</div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://cccimg.com/view.php/940502d368d9d9be2d78a45a14f312d8.mp3" autoplay loop ></audio>
<video id="vid" src="https://cccimg.com/view.php/cf496d091a5afc35508a9b668ad1bfa1.mp4" autoplay loop muted ></video>
</div>
<div style="height:60px;"></div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play()):(aud.pause(),vid.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script >
(function() {
let lrcStr = `
曲:刀郎 词:文武可可
雪线之上化作山巅的云
刺刀挑起夜幕的星
崖边高地密密冰雪脚印
守护是这里唯一的口令
氧气稀薄催生爱的茂密
在冻土下长出根系
你用胸膛抵挡寒流侵袭
界碑已温暖融化在心底
谁说昆仑不语
它记得你年复一年
身上迷彩晕染朝霞幕烟的缠绵
当风雪雕刻你青春的容颜
你身化作祖国的剑
谁说冰川无情
它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若有亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐你们坚毅的背影
雪莲花突然开满你褪皮的掌心
所有牺牲都沉没如山脉
却让春天永远到来
巡逻的路蜿蜒生命动脉
呼吸伴随祖国节拍
无数寒冷陪伴孤寂的夜
把自己站成不灭的烽台
谁说昆仑不语
它记得你年复一年
身上迷彩晕染朝霞暮烟的缠绵
当风雪雕刻你青春的容颜
你身化作祖国的剑
谁说冰川无情
它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若是有亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐你们坚毅的背影
雪莲花突然开满你褪皮的掌心
所有牺牲都沉没如山脉
却让春天永远到来
`;
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;};
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 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'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.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);
})();
</script>
这改编导歌词真好，写出来边防战士的不易。
感谢寒冬残荷带来的好歌{:4_199:} 这不是刀郎的《我的楼兰》的曲，这人用歌颂边防军人的无私奉献，而改编歌词，估计刀郎不会说什么吧。 看得人瞅心呐{:4_181:} 问好寒冬残荷，欢迎来花潮论坛玩{:4_171:} 这个视频背景做的歌词效果不错，就是播放器小了一点，我找了很久{:4_173:} 感谢精彩分享{:4_199:}
页:
[1]