论坛 › 动画音画 › 《对着月亮唱情歌》王紫菲

焱鑫磊 发表于 2023-6-1 10:55

《对着月亮唱情歌》王紫菲

本帖最后由 焱鑫磊 于 2023-6-1 10:55 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://pic.imgdb.cn/item/64780250f024cca173d1bb48.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 { position: absolute; width: 100%; height: 300px; bottom: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 8;}
.mLine { position: relative; margin: 0px 2px 0 0; width: 4px; height: 10px; background: linear-gradient(0deg, rgba(99, 99, 99, 0) 0%,rgba(162, 171, 88, 0) 100%); transition: height .45s; }
.mLine::before { position: absolute; content: ''; width: 100%; height: 4px; background:#fff000;top: 0px;border-radius:50%;animation: dd 5s linear infinite;}
@keyframes dd { 0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(1);left: -30px;} }
#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;}
}

#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:520px; 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: 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:translate(100%,0%)scale(0);}
12% {
opacity: 1;
transform:translate(0%,0%)scale(0.6);}
18% {
opacity: 1;
transform:translate(0%,0%)scale(0.6);}
20% {
opacity: 0;
transform:translate(-100%,0%)scale(0.6);}
}
img:nth-child(1) {background:url(https://pic.imgdb.cn/item/647802a7f024cca173d24313.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(2) {background:url(https://pic.imgdb.cn/item/647802daf024cca173d28e50.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(3) {background:url(https://pic.imgdb.cn/item/6478030bf024cca173d2d15d.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(4) {background:url(https://pic.imgdb.cn/item/64780348f024cca173d31df7.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(5) {background:url(https://pic.imgdb.cn/item/64780392f024cca173d3b138.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(6) {background:url(https://pic.imgdb.cn/item/64780401f024cca173d489b2.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(7) {background:url(https://pic.imgdb.cn/item/64780433f024cca173d4df7f.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(8) {background:url(https://pic.imgdb.cn/item/64780464f024cca173d521fc.jpg)0 0/100% 100%;
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;
}
</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: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: 100px; height: 100px;mask: radial-gradient(transparent 5px,#red 0);-webkit-mask: radial-gradient(transparent 5px,red 0);background:url(https://pan.365.tf/uploads/xmhy/gp.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
      </div>
      <audio id="aud" src="https://mp3.wf/uploap/file/20230601100405.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:20px; 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 = `《对着月亮唱情歌》王紫菲
词：陈道斌 曲：孟文豪
对着月亮唱情歌
我把心事对你说
摘颗星星挂梦里
醉了阿妹小酒窝
亲爱的你啊听我唱歌
歌儿伴你一路不寂寞
亲爱的你啊还等什么
幸福为我们开花结果
山前的小河啊荡着清波
山后飘来阿哥的情歌
含羞的云朵轻轻飘过
醉了阿妹甜甜的小酒窝
赶路的月亮啊歇在山坡
我把心事对她来诉说
摘颗星星挂在你梦里
那是阿妹火热眼波
亲爱的你啊听我唱歌
歌儿伴你一路不寂寞
亲爱的你啊还等什么
幸福为我们开花结果
对着月亮唱情歌
我把心事对你说
摘颗星星挂梦里
醉了阿妹小酒窝
亲爱的你啊听我唱歌
歌儿伴你一路不寂寞
亲爱的你啊还等什么
幸福为我们开花结果
山前的小河
啊荡着清波
山后飘来
阿哥的情歌
含羞的云朵
轻轻飘过
醉了阿妹甜甜的小酒窝
赶路的月亮啊歇在山坡
我把心事对她来诉说
摘颗星星挂在你梦里
那是阿妹火热眼波
亲爱的你啊听我唱歌
歌儿伴你一路不寂寞
亲爱的你啊还等什么
幸福为我们开花结果
亲爱的你啊
听我来唱歌
歌儿伴你走过山万座
亲爱的你啊别再问我
一路上的情歌把爱诉说
一路上的情歌把爱诉说

`;
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-6-1 13:18

欣赏美帖，好听好看！收藏学习了！{:4_187:}

焱鑫磊 发表于 2023-6-1 14:22

亦是金 发表于 2023-6-1 13:18
欣赏美帖，好听好看！收藏学习了！

问好亦是金！{:4_191:}

红影 发表于 2023-6-1 15:14

漂亮的制作，欣赏焱鑫磊好帖{:4_187:}
这个代码里的部分内容和论坛设置冲突呢，让表情符号都变化了。

梦缘 发表于 2023-6-1 15:52

漂亮的播放器，歌好听。{:4_204:}

焱鑫磊 发表于 2023-6-1 15:57

红影 发表于 2023-6-1 15:14
漂亮的制作，欣赏焱鑫磊好帖
这个代码里的部分内容和论坛设置冲突呢，让表情符号都变化了。

问好红影！我也发现有问题，有些卡。没找到原因呢。{:4_204:}

焱鑫磊 发表于 2023-6-1 15:58

梦缘 发表于 2023-6-1 15:52
漂亮的播放器，歌好听。

问好梦缘！{:4_187:}

红影 发表于 2023-6-1 21:13

焱鑫磊 发表于 2023-6-1 15:57
问好红影！我也发现有问题，有些卡。没找到原因呢。

可能是命名和论坛冲突？

查看完整版本: 《对着月亮唱情歌》王紫菲