李亚伦 发表于 2023-1-2 16:14:48

爱你是那么辛苦（dj版）

<style>
#papa { margin: 10px -300px ; width: 1164px; height: 620px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/87e58a27cbd1e63c340d92b8b2e7d7d1.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: '爱你是那么辛苦（dj版）'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #ff0000; text-shadow: 2px 2px 3px #000000; z-index: 6;}
#mplayer { --ww: 360px; --hh: 120px; --bg:#ff0000; --state: paused; --zx: 0.6; margin: auto; position: absolute; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; z-indez: 1; }
.mLine { position: relative; margin: 0 1px 0 1px; width: 4px; height: 10px; background: #00FF00; }
.mLine::before{ position: absolute; content: ''; width: 100%; height: 4px; background: #fff000; top: -80px;animation: up 1s infinite; animation-play-state: var(--state);border-radius:50%;}
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: snow;top: 100%; }
@keyframes up { to { top: -15px;} }
#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:200px; left:-580px;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 top;
-webkit-transform:rotate(45deg)scale(.4);
opacity:1
}

40% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(-135deg)scale(.4);
opacity:1
}


60% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(-180deg)scale(.4);
opacity:1
}

80% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(-225deg)scale(.4);
opacity:1
}
100% {
left:1600px;
-webkit-transform:rotate(-270deg)scale(.4);
opacity:1
}
}
img:nth-child(1) {background:url(http://pan.yinhuabbs.cn/view.php/0491d81f74c969bf1888c6ad1244b8fb.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(2) {background:url(http://pan.yinhuabbs.cn/view.php/0872f86ef1f298b678b24d4fc3e0410e.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(3) {background:url(http://pan.yinhuabbs.cn/view.php/5197c2ccbfc88c09bde2542f8adfe408.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(4) {background:url(http://pan.yinhuabbs.cn/view.php/7e912ad498917afa0ce37a2aa2a54edf.jpg)0 0/100% 100%;
animation-delay: 24s;
}

img:nth-child(5) {background:url(http://pan.yinhuabbs.cn/view.php/0299894d6606ad01f8b2b4bef582f981.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(6) {background:url(http://pan.yinhuabbs.cn/view.php/2fa3a21dafa7d0abcb5acd6c0819c01a.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(7) {background:url(http://pan.yinhuabbs.cn/view.php/23bff6bfff198a2a432966e3bb36f6bf.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(8) {background:url(http://pan.yinhuabbs.cn/view.php/0bec1b83ea805e88ce1e32226728586d.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" title="亚伦影音">
<div id="testImg"title="亚伦影音"><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="lrc" data-lrc="HCPlayer"></div><div id="mplayer"></div>
<div id="dt" ></div>
<div class="bg">
<div id="" style="width: 1164px; height: 160px;position: absolute;top:420px; left:120px;z-index: 10;"title="亚伦影音">
<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%;" title="播放/暂停"></div></div>
</div>
      </div>
      <audio id="aud" src="http://url.amp3a.com/kuwo.php/210627935.mp3" loop autoplay></audio>
<script>
(function() {
      //插件代码
      (function(mkPlayer) {let defaults = {player_css: 'bottom: 15px; left: 50%; transform: translate(-50%)',playerCode: `<style></style>`,};let playCode = (user_config) => {let

data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag =

true;let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let total = Math.ceil(mplayer.offsetWidth / 6), zx = getCssVal(mplayer,'--zx').replace(/[^\d\.]/ig,'') ||

0.25;if(zx > 4) zx = 4;let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);for(j=0; j<total; j++) {let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;let el =

document.createElement('span');el.className = 'mLine';el.style.cssText= `bottom: ${k*zx}px;background: linear-gradient(0deg, #00ff00 25%,#00ff00 75%);--ballcolor: linear-gradient

(180deg, #ffff00 25%,#00ff00 75%);`;
mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');function update() {lines.forEach((item,key) => item.style.height = Math.floor(Math.random() *

(mplayer.offsetHeight - 20))+'px');}aud.addEventListener('timeupdate', () => {update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey

=== j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () =>

calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state',

'running'),mplayer.style.setProperty('--state', 'running'));};mkPlayer.HCPlayer = playCode;})(this);
      
      //参数配置
      HCPlayer({
            
                player_css: '--ww: 1164px; --hh: 120px; --zx: 0.3; bottom: 8px; left: 0px;',
      });
})();
</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 = `本字幕由腾讯音乐天琴实验室独家AI字幕技术生成
你心里太过于用心
你有我的容身之地
为了你我改了脾气
原来我不在你心里
爱你是那么的辛苦
而你却总是让我哭
有时候我也很无助
忍不下心就此结束
我拼了命的想念你
你拼命的把我忘记
忍不住给你发信息
而你却把我屏蔽
爱你是那么的辛苦
而你却总是让我哭
有时候我也很无助
狠不下心就自己输
我拼了命的想念你
你拼命的把我忘记
忍不住给你发信息
而你却把我屏蔽
我拼了命的想念你
你拼命的把我忘记
忍不住给你发信息
而你却把我屏蔽
哈喽大家好
欢迎收听抖音DJ 嗨曲直通车
陪你看过花开别离
闪过日落潮汐
也曾提笔话你双眸
眼中的情愫在画笔下娓娓道来
你说相遇那天
漫天扬起的不是风动
而是心动
有幸相遇
不谈别离
今夜再次清凉月
遇见好梦中成功
物是人非美吗
万箭穿心痛吗
无坚不摧累吗
久溺深海冷吗
他不爱你懂吗
不多愁善感
不触景伤情新处变不惊
才不会那么多的劣迹斑斑放不下
以至于那么狠的伤痕累累
`;
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-1-3 18:43:58

画面灵动，LRC编辑合拍，代码编写效果出彩，构思新颖，歌曲悦耳动听寄情，赞一个，问好老师！

沐风 发表于 2023-1-6 10:33:45

辛苦了就累了～
页: [1]
查看完整版本: 爱你是那么辛苦（dj版）