《爱如星火》冷漠杨小曼

焱鑫磊 发表于 2023-4-21 13:20

本帖最后由焱鑫磊于 2023-4-24 20:06 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://pic1.imgdb.cn/item/644211010d2dde5777ff44e3.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: #ff0000; text-shadow: 2px 2px 3px #000000; 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: 0px 0px 0px 0px;width: 10px;height: 10px;clip-path: polygon(50% 0,0 100%, 100% 100%);background: linear-gradient(0deg, #00Ff00 8%,#fff000 80%,#fff000 80%);transition: .35s;opacity:1;}
.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://pic.imgdb.cn/item/63979dcdb1fccdcd3655f9ee.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;}
}
.photo {width: 1164px; height: 640px;
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;
}
@keyframes round {
0% {opacity: 1;transform:rotateX(-180deg) translateZ(10.90909px);}
5% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
8% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
12% {opacity: 1;transform: perspective(600px) rotateY(0deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}
img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay: 0s;}

.stop img:nth-child(1){animation-delay: 42s;animation-play-state: paused;}
.stop img:nth-child(2){animation-delay: 36s;animation-play-state: paused;}
.stopimg:nth-child(3) {animation-delay: 30s;animation-play-state: paused;}
.stop img:nth-child(4){animation-delay: 24s;animation-play-state: paused;}
.stop img:nth-child(5){animation-delay: 18s;animation-play-state: paused;}
.stop img:nth-child(6){animation-delay: 12s;animation-play-state: paused;}
.stop img:nth-child(7){animation-delay: 6s;animation-play-state: paused;}
.stop img:nth-child(8){animation-delay: 0s;animation-play-state: paused;}

#img_border{display:inline-block;width:120px;height:120px;position: absolute;top:420px; left:880px;z-index: 80;border-radius:0%; transition: .3s all ease;animation:rotating 10s linear infinite;}
@keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2);}
}
</style>
<div id="papa">
<div id="testImg"><div id="texiao"><img class='photo'src="https://pic1.imgdb.cn/item/64420eac0d2dde5777fc4a27.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420ecd0d2dde5777fc74b2.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420ee50d2dde5777fc9a74.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420efc0d2dde5777fcbaea.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420f140d2dde5777fcd7e1.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420f290d2dde5777fcf353.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420f3f0d2dde5777fd0e0d.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/64420f5a0d2dde5777fd3188.jpg" alt="" /></div></div>
<div id="mplayer"></div>
<div id="dt" ></div>
<div class="bg">
<div id="" style="width: 1164px; height: 160px;position: absolute;top:520px; left:120px;z-index: 10;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 120px; height: 120px;background:url(https://img.fy6b.com/2023/03/10/d3376b7249de2.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
   </div>
   <audio id="aud" src="https://www.joy127.com/url/104048.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);

let 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:0px; 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: #00ff00;
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>

罗浮梦 发表于 2023-4-21 16:05

精美绝伦的艺术品

罗浮梦 发表于 2023-4-21 16:09

听完了，这个耐听。。

红影发表于 2023-4-21 19:26

漂亮的频谱播放器，所有动态可以一键暂停，歌词同步也做得很好。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-4-22 08:57

罗浮梦发表于 2023-4-21 16:05
精美绝伦的艺术品

向你问好！{:4_187:}

焱鑫磊 发表于 2023-4-22 08:58

罗浮梦发表于 2023-4-21 16:09
听完了，这个耐听。。

向你问好！{:4_187:}

焱鑫磊 发表于 2023-4-22 08:58

红影发表于 2023-4-21 19:26
漂亮的频谱播放器，所有动态可以一键暂停，歌词同步也做得很好。欣赏焱鑫磊好帖

向红影问好！{:4_187:}

梦缘发表于 2023-4-22 19:23

好美的播放器，欣赏点赞！{:4_187:}

焱鑫磊 发表于 2023-4-22 21:32

梦缘发表于 2023-4-22 19:23
好美的播放器，欣赏点赞！

问候朋友好！{:4_204:}

红影发表于 2023-4-22 21:54

焱鑫磊发表于 2023-4-22 08:58
向红影问好！

问好焱鑫磊，晚上好{:4_204:}

页: [1]

花潮论坛's Archiver

《爱如星火》冷漠 杨小曼

《爱如星火》冷漠杨小曼