《伤心的路口》柏文
本帖最后由 焱鑫磊 于 2023-5-18 12:43 编辑 <br /><br /><style>#papa { margin: 100px -280px ; width: 1164px; height: 698px; background:url(https://pic2.imgdb.cn/item/64623c8d0d2dde577767e7de.jpg)0px 0px/100% 100%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa::before { position: absolute; content: '《伤心的路口》柏文'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #0000FF; text-shadow: 2px 2px 3px #00FF00; z-index: 6;}
#mplayer {--ww: 300px;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;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: 5px;height: 10px;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; }
#dt { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://pic2.imgdb.cn/item/64623df50d2dde577769d981.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:560px; left:50px;z-index: 30;border-radius:0%; transition: .3s all ease;animation:rotating 10s linear infinite;filter:drop-shadow(#ffffff 0px 0 1px)}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
.photo {width: 1164px; height: 698px;
position: absolute;z-index: -2;border:2px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
</style>
<div id="papa">
<div id="testImg"><div id="texiao"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div></div>
<div id="mplayer"></div>
<div id="dt" ></div>
<div class="bg">
<div id="" style="width: 1164px; height: 160px;position: absolute;top:550px; left:120px;z-index: 0;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 100px; height: 100px;mask: radial-gradient(transparent 5px,#red 0);-webkit-mask: radial-gradient(transparent 5px,red 0);background:url(https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/104946.mp3" 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);
ypData = ;
HCPlayer({ypData: ypData,
player_css: '--ww: 100%; --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;z-index: 10;}
#aud{
width: 250px;
display: block;
margin: 0 auto;}
.btn{
display: block;
margin: 0;}
.lrc{
width: 960px;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:50px; 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: 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: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#00ff00 43%,#FEFFFF 52%,#F32121 62%,#F32121 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)brightness(200%);
-webkit-animation:loop 3s linear 1.5;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
</style>
<script >var lrc = `《伤心的路口》柏文
词：谢桐 曲：孟文豪
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;
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.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');
var image = document.getElementById("testImg"),
button = document.getElementById("btn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script>
那个飘动的音符真好看，欣赏焱鑫磊带频谱的美妙好帖{:4_187:} 红影 发表于 2023-5-15 22:37
那个飘动的音符真好看，欣赏焱鑫磊带频谱的美妙好帖
红影晚上好！{:4_187:}{:4_187:}{:4_187:} 欣赏精美帖子！好看点赞！{:4_187:}学习了！ 漂亮极了 亦是金 发表于 2023-5-15 22:47
欣赏精美帖子！好看点赞！学习了！
亦是金晚上好！{:4_204:} 罗浮梦 发表于 2023-5-15 22:58
漂亮极了
罗浮梦晚上好！{:4_187:} 醉美水芙蓉 发表于 2023-5-15 23:18
欣赏美女佳作！
朋友晚上好！{:4_204:} 漂亮的播放器，欣赏点赞！{:4_187:} 梦缘 发表于 2023-5-16 10:17
漂亮的播放器，欣赏点赞！
梦缘好！{:4_204:} 焱鑫磊 发表于 2023-5-15 22:38
红影晚上好！
焱鑫磊好，今天外出了，回复迟了{:4_187:}
页:
[1]