风雨中的诺言 TO：顾念 贺生辰
<style>
#papa{ margin: 150px 0 20px calc(50% - 780px);
width: 1388px;
height: 781px;
background:#000000 ;
no-repeat center/cover; box-shadow: 1px 1px 3px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:50px; left:340px;width: 32px; height: 32px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:90%; left:19%;
bottom: 5px;
width: 30px;
height: 30px;
border: 0px solid #cccccc;
border-radius: 0%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #FFFFFF;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 43px;
border-width: 4px 4.5px;
border-color: transparent transparent transparent #FFFFFF;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 7px;
left: 23px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 12px sans-serif;
color: #FFFFFF;
top:90.6%;
left:57%;}
#prog {position: absolute;z-index: 91;
width: 28.8%;
height: 0.1%;
cursor: pointer;
top:91.8%;
color: #FFFFFF;
box-shadow: 0px 0px 0.1px 0.1px #000000;
left:26.8%;
border-radius: 2px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 28%; width: var(--w); overflow: hidden; color: #FFFFFF; position: absolute; left:38%;top:88%;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">
<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt"> 风雨中的诺言 演唱：金钰儿</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://xlaj.cn/assets/file/zp/20240531170010.gif " width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
<div id="wzsd1"><ul id="ullrc">
</ul>
</div>
</div>
</div>
<audio id="aud" src="https://file.uhsea.com/2405/cb7093ec87d61a4935a2b3eb017085b6BI.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 100%;
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:8%; left:4%;z-index: 5;
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: 0px;
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: 40px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc =`风雨中的诺言
演唱：金钰儿
作词：陈宝亮＆东耳
作曲：王家军
编曲：李德奎
混音：王哲
和声：雪无影
监制：金钰儿
制作人：左为 ＆inin
万般温柔
化做尘埃
一片真心只剩空白
情到深处
是孤独超载
我跌跌撞撞走到现在
太多伤疤
不忍揭开
太多难堪只能深埋
爱到最后
却被人替代
我选择成全黯然离开
我走在风里走在雨里
我在爱的世界奉陪到底
爱错了人
会被伤害
哪怕错爱也无法忘怀
我不能回头不能挽留
不能忘掉我们曾经拥有
爱怕的人
不敢再爱
诺言慢慢消失在人海
~Music~
太多伤疤
不忍揭开
太多难堪只能深埋
爱到最后
却被人替代
我选择成全黯然离开
我走在风里走在雨里
我在爱的世界奉陪到底
爱错了人
会被伤害
哪怕错爱也无法忘怀
我不能回头不能挽留
不能忘掉我们曾经拥有
爱怕的人
不敢再爱
诺言慢慢消失在人海
我走在风里走在雨里
我在爱的世界奉陪到底
爱错了人
会被伤害
哪怕错爱也无法忘怀
我不能回头不能挽留
不能忘掉我们曾经拥有
爱怕的人
不敢再爱
诺言慢慢消失在人海
谢谢欣赏
谢谢欣赏
`;
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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, Gold, Gold, Gold ' + aud.currentTime / aud.duration * 100 + '%, Honeydew 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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;
};
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.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;
// 透明度还原
image.style.opacity = '';image1.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("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>
<br><br><br><br><br> @顾念
问好暖男，一直没有时间做贺帖，好像迟了，看见红影的帖是5月24号。抱歉了 暖男也是应该认识很久了，喜欢你的翻唱，以前还翻唱多一点，现在也是少了，记得那年小辣椒论坛分享swf单曲播放器，用了你翻唱试听，一面做，一面听，感觉特别好{:4_205:}，
但小辣椒以前真的很S板，从来不互动，就自己捣鼓播放器。。。。还是暖男来了花潮，我们才多聊了几句了 小辣椒做了个自己喜欢的仿swf画面的播放器，按钮就打开和停止，其他不能操作，暖男不要嫌弃。小辣椒就这点水平，笑纳吧 祝福暖男，素衣，幸福的一对儿，开心快乐！幸福永远！爱你们哦{:4_179:} 借顾念生日，又能听到好听好看的小辣椒音乐了。
暖男生日开心! 小辣椒 发表于 2024-5-31 17:37
@顾念
问好暖男，一直没有时间做贺帖，好像迟了，看见红影的帖是5月24号。抱歉了
我也是昨天下午才知道滴。又不是去吃生日蛋糕，祝福早迟没有关系，心意尽到就好。{:4_173:} 樵歌 发表于 2024-5-31 17:50
我也是昨天下午才知道滴。又不是去吃生日蛋糕，祝福早迟没有关系，心意尽到就好。
樵哥哥说得没错，我得下了去吃饭了
樵哥哥多保重哦{:4_179:} 借小辣椒朋友的精美贺帖祝福顾念生日快乐！ 风雨中的诺言，是一份爱的约定。
亲爱的这个制作真美。借亲爱的好帖，同祝顾念生日快乐{:4_199:} 非常漂亮的生日贴，与辣椒一起祝顾念生日快乐！{:4_204:}{:4_187:} 梦油 发表于 2024-5-31 18:03
借小辣椒朋友的精美贺帖祝福顾念生日快乐！
问好梦油，一起欣赏，一起送祝福{:4_187:} 红影 发表于 2024-5-31 19:43
风雨中的诺言，是一份爱的约定。
亲爱的这个制作真美。借亲爱的好帖，同祝顾念生日快乐
亲爱的，怕来不及就敢出来的，现在时间少，只能这样了 小九 发表于 2024-5-31 20:36
非常漂亮的生日贴，与辣椒一起祝顾念生日快乐！
小九晚上好，一起欣赏，一起送祝福！ 小辣椒 发表于 2024-5-31 17:45
祝福暖男，素衣，幸福的一对儿，开心快乐！幸福永远！爱你们哦
谢谢亲爱的小辣椒，这礼物我先替顾先生签收了，他这两天有点忙，等他不忙了就会亲自来收礼的 小辣椒 发表于 2024-5-31 20:42
亲爱的，怕来不及就敢出来的，现在时间少，只能这样了
亲爱的随便做就很漂亮呢，厉害{:4_187:} 小辣椒 发表于 2024-5-31 20:41
问好梦油，一起欣赏，一起送祝福
和谐花潮是一个友爱的集体。 素衣 发表于 2024-5-31 22:55
谢谢亲爱的小辣椒，这礼物我先替顾先生签收了，他这两天有点忙，等他不忙了就会亲自来收礼的
没事，现实生活重要 红影 发表于 2024-6-1 09:52
亲爱的随便做就很漂亮呢，厉害
我现在是真的做不好自己满意的东西了，只能凑合了 梦油 发表于 2024-6-1 10:40
和谐花潮是一个友爱的集体。
梦油晚上好，是啊，花潮是个有爱的大家庭
页:
[1]
2