论坛 › 动画音画 › 《出局》袁娅维TIA RAY

焱鑫磊 发表于 2023-4-5 02:45

《出局》袁娅维TIA RAY

本帖最后由 焱鑫磊 于 2023-4-5 21:22 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://img.fy6b.com/2023/04/05/2d81085f26e69.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: '《出局》袁娅维TIA RAY'; 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/04/05/354122034e886.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/762ae319a7e18.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/afde69c3ccade.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/e9ab8abf29f0c.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/7525f1689e43d.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/a5f72f2c7ef85.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/08b6c28029a7a.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/04/05/8362b29515adb.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://www.kumeiwp.com/sub/filestores/2023/04/05/9cc23a55ba278fcea1bb29e0969417a2.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
      </div>
      <audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/04/05/d9135c25389b2efeae2b706c9df83398.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 = `《出局》袁娅维TIA RAY
《灿烂的转身》影视剧插曲
词：花僖悦袁文睿曲：袁文睿
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-5 06:02

太有创意了，精彩

马黑黑 发表于 2023-4-5 07:49

创意与主体贴合，妙

红影 发表于 2023-4-5 07:53

用电视剧的相关信息做主题曲的背景，这个构思真巧妙。还有一把小伞，增加了做的灵动。按钮能让所有动态暂停。这个制作真棒{:4_199:}

红影 发表于 2023-4-5 07:53

看到发帖时间是凌晨，焱鑫磊那么晚还在啊，真不容易{:4_204:}

樵歌 发表于 2023-4-5 08:08

太漂亮，太精彩，也太辛苦了！{:4_187:}{:4_190:}

梦缘 发表于 2023-4-5 16:19

创意很好，欣赏点赞！{:4_176:}

焱鑫磊 发表于 2023-4-5 21:23

庶民 发表于 2023-4-5 06:02
太有创意了，精彩

问好！{:4_187:}

焱鑫磊 发表于 2023-4-5 21:23

马黑黑 发表于 2023-4-5 07:49
创意与主体贴合，妙

问好！{:4_187:}

焱鑫磊 发表于 2023-4-5 21:24

红影 发表于 2023-4-5 07:53
用电视剧的相关信息做主题曲的背景，这个构思真巧妙。还有一把小伞，增加了做的灵动。按钮能让所有动态暂停 ...

问好！{:4_187:}

焱鑫磊 发表于 2023-4-5 21:25

红影 发表于 2023-4-5 07:53
看到发帖时间是凌晨，焱鑫磊那么晚还在啊，真不容易

看着连续剧，突发奇想，做个歌单玩玩。

焱鑫磊 发表于 2023-4-5 21:25

樵歌 发表于 2023-4-5 08:08
太漂亮，太精彩，也太辛苦了！

问好！{:4_187:}

焱鑫磊 发表于 2023-4-5 21:26

梦缘 发表于 2023-4-5 16:19
创意很好，欣赏点赞！

问好！{:4_187:}

马黑黑 发表于 2023-4-5 21:28

焱鑫磊 发表于 2023-4-5 21:23
问好！

晚上好

红影 发表于 2023-4-5 22:32

焱鑫磊 发表于 2023-4-5 21:24
问好！

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

红影 发表于 2023-4-5 22:32

焱鑫磊 发表于 2023-4-5 21:25
看着连续剧，突发奇想，做个歌单玩玩。

思路真灵活，往往是灵机一动的作品最好呢{:4_187:}

焱鑫磊 发表于 2023-4-6 17:04

红影 发表于 2023-4-5 22:32
思路真灵活，往往是灵机一动的作品最好呢

问候红影好！{:4_190:}

红影 发表于 2023-4-6 20:39

焱鑫磊 发表于 2023-4-6 17:04
问候红影好！

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

樵歌 发表于 2023-4-9 19:34

焱鑫磊 发表于 2023-4-5 21:25
问好！

不客气{:4_190:}

查看完整版本: 《出局》袁娅维TIA RAY