焱鑫磊 发表于 2023-4-27 17:41

《平凡的我》杨宗纬

<style>
#papa { margin: 110px -150px ; width: 1164px; height: 640px; background:url(https://pic2.imgdb.cn/item/6449652d0d2dde5777a9530c.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://pic2.imgdb.cn/item/644965540d2dde5777a97533.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/644965810d2dde5777a99da3.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/644965a00d2dde5777a9ba6b.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/644965bc0d2dde5777a9dc23.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/644965d20d2dde5777a9ef35.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/644965f20d2dde5777aa0a2d.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/6449660a0d2dde5777aa1ef3.jpg" alt="" />
<img class='photo'src="https://pic2.imgdb.cn/item/6449665f0d2dde5777aa7605.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/104262.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 = `《平凡的我》杨宗纬
《尘封十三载》影视剧片尾曲
词：代岳东 曲：李智圣霖
谁曾走过 漆黑无人的角落
谁烈日下 为理想疲于奔波
这城市中 多少人
平凡如 你我
要挫败过 才算体味了生活
要失去后 才明白切肤的痛
这世界上 多少人
曾像你 也像我
向命运挥拳 紧握着双手
痛也不闪躲
浇不熄 扑不灭 心中那团火
站在狂风中 尝尽了冷漠
都一笑而过
愿奔赴岁月那条长河
要蛰伏过 才无畏所有脆弱
要勇敢后 才看见波澜壮阔
这世界上 多少人
就像你 就像我
向命运挥拳 紧握着双??
痛也不闪躲
浇不熄 扑不灭 心中那团火
站在狂风中 尝尽了冷漠
都一笑而过
愿奔赴岁月那条??河
继续吧 往前走
别停留 别害怕 暗潮汹涌
命运前 不屈服 不颤抖
不退缩 也不低头
致那些 哭过的 笑过的
我们的 真实生活
同样是 可歌的 可泣的
普通的 也平凡的人生 人生

`;
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-27 20:07

欣赏收藏老师的[音乐专辑]好看又好听，点赞！

蓝魔 发表于 2023-4-27 21:19

欣赏一下，谢谢。

焱鑫磊 发表于 2023-4-27 23:27

巫荣云师 发表于 2023-4-27 20:07
欣赏收藏老师的[音乐专辑]好看又好听，点赞！

问候老师好！{:1_292:}

焱鑫磊 发表于 2023-4-27 23:27

蓝魔 发表于 2023-4-27 21:19
欣赏一下，谢谢。

问候老师好！{:1_292:}

糊图花 发表于 2023-7-3 15:34

一环内       

糊图花 发表于 2023-7-3 15:34

问好！{:1_292:}   

糊图花 发表于 2023-7-3 15:34

欣赏佳作来了

糊图花 发表于 2023-7-3 15:34

精彩，好听

糊图花 发表于 2023-7-3 15:34

学习，点赞 {:1_293:}
页: [1] 2
查看完整版本: 《平凡的我》杨宗纬