焱鑫磊 发表于 2023-12-9 19:28

《女孩我的心上人》刘牧 TO：红影

本帖最后由 焱鑫磊 于 2023-12-9 19:40 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://img.fy6b.com/2023/12/09/a564894174741.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://img.fy6b.com/2023/12/09/c41c4c018f790.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/55ad7b0c46384.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/3098da1e1e11e.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/618a819675506.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/552652bd114ea.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/9a0b49fe9e0fa.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/e423cc63fc1bc.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/12/09/5232910aee4c3.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:470px; left:0px;z-index: 10;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 80px; height: 80px;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://i.mp3.wf/view.php/0bff8bd0a184321358468725be22b6f0.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:50px; left:70px;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-12-9 19:39

好听，好看，点赞！{:4_187:}

焱鑫磊 发表于 2023-12-9 19:40

亦是金 发表于 2023-12-9 19:39
好听，好看，点赞！

{:4_187:}{:4_187:}{:4_187:}

红影 发表于 2023-12-9 21:09

这么美的帖子，还是送我的呢。太开心了，谢谢炎鑫磊{:4_199:}

红影 发表于 2023-12-9 21:10

飞舞的花伞，还有轮播的美人图和漂亮的频谱，这样的帖子真让人赏心悦目{:4_187:}

红影 发表于 2023-12-9 21:11

这个还是一键全控的，制作太美了{:4_199:}

红影 发表于 2023-12-9 21:11

收到这么美的帖子太开心了，影子珍藏{:4_187:}

焱鑫磊 发表于 2023-12-9 21:31

红影 发表于 2023-12-9 21:09
这么美的帖子，还是送我的呢。太开心了，谢谢炎鑫磊

{:4_176:}

焱鑫磊 发表于 2023-12-9 21:31

红影 发表于 2023-12-9 21:10
飞舞的花伞，还有轮播的美人图和漂亮的频谱，这样的帖子真让人赏心悦目

{:4_190:}

焱鑫磊 发表于 2023-12-9 21:32

红影 发表于 2023-12-9 21:11
这个还是一键全控的，制作太美了

{:4_187:}{:4_187:}{:4_187:}

焱鑫磊 发表于 2023-12-9 21:32

红影 发表于 2023-12-9 21:11
收到这么美的帖子太开心了，影子珍藏

{:4_204:}祝红影开心！

红影 发表于 2023-12-9 22:11

焱鑫磊 发表于 2023-12-9 21:31


问好炎鑫磊，再次感谢好礼{:4_187:}

红影 发表于 2023-12-9 22:11

焱鑫磊 发表于 2023-12-9 21:31


晚上好{:4_187:}

红影 发表于 2023-12-9 22:11

焱鑫磊 发表于 2023-12-9 21:32
祝红影开心！

当然开心啊，能收到这么美的礼物呢{:4_173:}
页: [1]
查看完整版本: 《女孩我的心上人》刘牧 TO：红影