论坛 › 动画音画 › 《等你的前世今生》王紫菲

焱鑫磊 发表于 2023-5-31 10:43

《等你的前世今生》王紫菲

本帖最后由 焱鑫磊 于 2023-7-24 00:10 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://img.fy6b.com/2023/05/31/497da383889b3.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: 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://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% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(0.7)translate(-15%,-20%);
opacity:1
}
10% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}
11% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.9)translate(0%,0%);
opacity:1}
12% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}

22% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(0.7)translate(-15%,-20%);
opacity:0}
}
img:nth-child(1) {background:url(https://pic.imgdb.cn/item/64bd501d1ddac507cc4c178d.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(2) {background:url(https://pic.imgdb.cn/item/64bd50321ddac507cc4c6cd4.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(3) {background:url(https://pic.imgdb.cn/item/64bd50511ddac507cc4cbf5c.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(4) {background:url(https://pic.imgdb.cn/item/64bd506d1ddac507cc4d0f41.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(5) {background:url(https://pic.imgdb.cn/item/64bd50881ddac507cc4d53f2.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(6) {background:url(https://pic.imgdb.cn/item/64bd50a01ddac507cc4d97b5.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(7) {background:url(https://pic.imgdb.cn/item/64bd50b91ddac507cc4ddd63.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(8) {background:url(https://pic.imgdb.cn/item/64bd50d21ddac507cc4e1f47.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://pic.imgdb.cn/item/6412faecebf10e5d5357f0ef.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
      </div>
      <audio id="aud" src=" https://mp3.wf/uploap/file/20230531095459.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: #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>

红影 发表于 2023-5-31 10:53

好美的制作。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-5-31 10:58

红影 发表于 2023-5-31 10:53
好美的制作。欣赏焱鑫磊好帖

红影辛苦了！每帖必看、必评。谢谢！{:4_204:}

梦缘 发表于 2023-5-31 11:13

漂亮的播放器，欣赏点赞！{:4_185:}

焱鑫磊 发表于 2023-5-31 11:28

梦缘 发表于 2023-5-31 11:13
漂亮的播放器，欣赏点赞！

问好梦缘！{:4_187:}

小文 发表于 2023-5-31 14:01

好美的大手笔

一斛珠 发表于 2023-5-31 15:26

太好看了{:4_199:}

焱鑫磊 发表于 2023-5-31 15:32

小文 发表于 2023-5-31 14:01
好美的大手笔

问好小文{:4_187:}

焱鑫磊 发表于 2023-5-31 15:33

一斛珠 发表于 2023-5-31 15:26
太好看了

问候一斛珠好！{:4_204:}

红影 发表于 2023-5-31 17:27

焱鑫磊 发表于 2023-5-31 10:58
红影辛苦了！每帖必看、必评。谢谢！

好帖怎么舍得错过{:4_173:}

亦是金 发表于 2023-5-31 19:50

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

樵歌 发表于 2023-5-31 20:05

漂亮好看好听！{:4_187:}

焱鑫磊 发表于 2023-5-31 20:31

亦是金 发表于 2023-5-31 19:50
欣赏美帖，收藏学习了！

问好亦是金{:4_187:}

焱鑫磊 发表于 2023-5-31 20:32

樵歌 发表于 2023-5-31 20:05
漂亮好看好听！

樵歌晚上好！{:4_187:}

樵歌 发表于 2023-6-1 06:59

焱鑫磊 发表于 2023-5-31 20:32
樵歌晚上好！

焱小美女六一快乐{:4_204:}

查看完整版本: 《等你的前世今生》王紫菲