帖赠：無名 You're My Heart, You're My Soul - Modern Talking
<meta charset="UTF-8"><style>
#papa {margin: 150px -290px;
width: 1393px;
height: 703px;
background:#000 url(https://file.uhsea.com/2406/ac7e0430f2f9425c7125015f3baa86a6CT.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:100px; left:1050px;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:81.5%; left:80.5%;
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: 8px;
border-width: 7px 7px;
border-color: transparent transparent transparent #FFFFFF;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 12px;
left: 26px;
border-width: 0 3.5px 0 3.5px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 12px sans-serif;
color: #ffffff;
top:86.7%;
left:69%;}
#prog {position: absolute;z-index: 91;
width: 20%;
height: 0.3%;
cursor: pointer;
top:85.4%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
left:68%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#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: Lime; position: absolute; left:74%;top:65%;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">你是我的心 你是我的灵魂 </div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20240205153554.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://file.uhsea.com/2406/d913b5ef4a2b8b953798d276a66474b1ER.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/2406/1c8bdce0fdf05dcae0e4b3f767b215e8S3.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:18%; left:28%;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: 30px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `Lyrics by: Dieter Bohlen | Composed
你是我的心 你是我的灵魂
帖赠：無名
Deep in my heart, there's a fire, a burnin' heart
Deep in my heart, there's desire for a start
I'm dying in emotion
It's my world in fantasy
I'm livin' in my, livin' in my dreams
You're my heart, you're my soul
I keep it shining everywhere I go
You're my heart, you're my soul
I'll be holding you forever
Stay with you together
You're my heart, you're my soul
Yeah, a feelin' that our love will grow
You're my heart, you're my soul
That is the only thing I really know
~Music~
Let's close the door and believe my burnin' heart
Feeling all right come on, open up your heart
I'll keep the candles burning
Let your body melt in mine
I'm livin' in my, livin' in my dreams
You're my heart, you're my soul
I keep it shining everywhere I go
You're my heart, you're my soul
I'll be holding you forever
Stay with you together
You're my heart, you're my soul
Yeah, a feelin' that our love will grow
You're my heart, you're my soul
That is the only thing I really know
You're my heart, you're my soul
Yeah, a feelin' that our love will grow
You're my heart, you're my soul
That is the only thing I really know
You're my heart, you're my soul
Yeah, a feelin' that our love will grow
☆End☆
`;
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, Lime, Lime, Lime ' + aud.currentTime / aud.duration * 100 + '%, snow 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> 無名好~~同一首你的这首歌送给你，感谢你分享这么多好听的歌曲 {:5_150:}{:5_150:}{:5_150:} 小辣椒这个频谱做的频谱 無名收礼开心{:5_146:} liumang 发表于 2024-4-12 23:39
無名收礼开心
liumang 辛苦，工作这么忙还上来，赶快下了去休息，我也是准备下了，晚安 小辣椒 发表于 2024-4-12 23:48
liumang 辛苦，工作这么忙还上来，赶快下了去休息，我也是准备下了，晚安 ...
好的，一起下，晚安 频谱加上去了，赞一个
页:
[1]