你爱我坏 (DJ沈念版) 歌手：小鬼阿秋
<style>#papa{ margin: 150px 0 20px calc(50% - 698px);
width: 1235px;
height: 717px;
background:#000 url(https://wj.zp68.com/lxx/yunhua/2024/06/22/66.jpg)no-repeat center/cover; box-shadow: 3px 3px 20px #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:580px; left:150px;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:85.6%; left:80.2%;
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: #ccc;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 48px;
border-width: 3.5px 3.5px;
border-color: transparent transparent transparent #ccc;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 5px;
left: 22.5px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: bold 12px/16px '微软雅黑',serif;
color: #ccc;
top:82%;
left:79.4%;}
#prog {position: absolute;z-index: 91;
width: 11.0%;
height: 0.5%;
cursor: pointer;
top:85.1%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
left:79.2%;
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: #84c387; position: absolute; left:42%;top:90%;font-size: 20px; 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"> 你爱我坏 (DJ沈念版)歌手：小鬼阿秋</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://wj.zp68.com/lxx/yunhua/2024/06/22/66.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://aod.cos.tx.xmcdn.com/storages/fb68-audiofreehighqps/43/52/GMCoOSUJK8gPACAAAAJ-N9gb.m4a" 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:15%;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 =`如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
词：何深彰
曲：何深彰
编曲：众造文化
混音：李琰祥
监制：众造文化
制作人：高天
发行：漫吞吞文化
那年我什么都没有
不能留住你牵我的手
时间过去多年后 你在谁左右
总是想起你的眼眸
对你的爱说不出口
岁月带不走我的愁
也带不来你温柔
如果不分开的话
我们就可以一起跨年了
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
我的现在
。。。。。。
总是想起你的眼眸
对你的爱说不出口
岁月带不走我的愁
也带不来你温柔
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
如果当时我们没有被分开
现在会不会有小孩
是女儿像你那么可爱
还是儿子像我这个无赖
我好想看看现在你被谁疼爱
这份遗憾一生的爱
抬头看天空不让泪流下来
好好过好我的现在
抬头看天空不让泪流下来
好好过好我的现在
谢谢欣赏
`;
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());
})();
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #ccc, #ccc, #ccc ' + aud.currentTime / aud.duration * 100 + '%, #444444 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> @走过岁月
第二个心形粒子效果完成{:4_173:} 这个效果没有上次的浪漫{:4_170:} 感谢岁月的精彩分享，小辣椒可以瞎捣鼓的 高产啊{:5_106:} 起个网名好难 发表于 2024-6-23 15:13
高产啊
就是，小辣椒很勤奋的，休息天就努力完成做帖的，明天就开始就不能玩多了{:4_173:} 小辣椒 发表于 2024-6-23 15:16
就是，小辣椒很勤奋的，休息天就努力完成做帖的，明天就开始就不能玩多了
眼睛要紧啊 起个网名好难 发表于 2024-6-23 15:17
眼睛要紧啊
谢谢难难，好暖心的，我也是确实不自觉，我现在就是用一只眼在回帖，某人不在家里我就彻底放飞
准备下{:4_179:} 来得早不如来得巧，听听小辣椒带来的音乐。。{:4_187:} 欣赏彩制作，问候小辣椒。 小辣椒 发表于 2024-6-23 15:11
这个效果没有上次的浪漫
浪漫一般都是过去式 这个效果被亲爱的用得很巧呢，那几个爱字也很增彩，播放器也很漂亮。
欣赏亲爱的好帖{:4_199:} 欣赏老师的音画佳作！{:4_187:} 最喜欢小辣椒音乐了！
这是一个品牌！永远不能丢失自己的特色！{:4_178:} 构图效果极佳，很节奏，很浪漫的爱。{:4_204:} 最巧妙的的是大爱里面不断飞出小爱{:4_173:}这效果也是绝了。 小辣椒 发表于 2024-6-23 15:12
感谢岁月的精彩分享，小辣椒可以瞎捣鼓的
都把美女捣鼓活过来了。猛然对我一眨眼，差点吓我一小跳{:4_170:} 南无月 发表于 2024-6-23 15:56
来得早不如来得巧，听听小辣椒带来的音乐。。
问好月月，这歌曲是搞笑版的{:4_172:} 梦油 发表于 2024-6-23 16:39
欣赏彩制作，问候小辣椒。
梦油好，谢谢{:4_187:}