论坛 › 欢乐水吧 › 战马(DJ 九零版)-崔伟立

亚伦影音工作室 发表于 2024-7-13 17:57

战马(DJ 九零版)-崔伟立

本帖最后由 亚伦影音工作室 于 2024-7-13 17:57 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 521px); background:#800 url('https://pic.imgdb.cn/item/6608fdcf9f345e8d039be6cd.jpg')no-repeat center/cover;width: 1164px; height: 600px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mplayer { position: absolute; left:5%; bottom: 20px; width: 50px; height: 50px;   place-items: center; transition: .8s; --opt: 1;z-index: 15; }
#mplayer::before, #mplayer::after { position: absolute; content: '';width: 50px; height: 50px;transition: .3s; cursor: pointer; }
      #mplayer::before { background: url('https://pic.imgdb.cn/item/6434ca740d2dde5777f40632.png')no-repeat center/cover; opacity: calc(var(--opt) * 1);}
      #mplayer::after { background: url('https://pic.imgdb.cn/item/6434c8860d2dde5777f15c6a.png')no-repeat center/cover;opacity: calc(1 - var(--opt)); }
      #mplayer:hover { transform: scale(1);}

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 30px;
      left:87%;}
#prog {position: absolute;z-index: 8;
      width: 76%;
      height: 1.5px;
      cursor: pointer;
         bottom: 35px;
left:10%;
border-radius: 1px;}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;bottom: 5px; left:4%;z-index: 5;
    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: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, #ff0000, #000080, #ff0000, #000, #ff0000) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
}

.photo {width: 70%; height: 70%;
position: absolute;z-index: 1;border-radius: 0px 0px 0px 0px;
top:50px; left:200px;transform-origin:top left;
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {0% { opacity: 1;
   transform: rotate(360deg); }
    6% { opacity: 1;transform: rotate(0deg);}
    10% { opacity: 1; transform: rotate(0deg);}
    16% { opacity: 1; transform: rotate(0deg);}
20% { opacity: 0; transform: rotate(0deg);}

}
.photo:nth-child(1) {background:url(https://file.moyublog.com/d/file/2020-12-16/88764c47b149d2f7f11fe496a093b245.jpg)no-repeat center/cover;
}
.photo:nth-child(2) {background:url(https://file.moyublog.com/d/file/2020-11-26/cfd4949f05ad2e7bed52453685e2ab3b.jpg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(3) {background:url(https://file.moyublog.com/d/file/2021-02-06/8cb0f3f4db0f5db714d70265400dc115.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(4) {background:url(https://file.moyublog.com/d/file/2021-07-12/8eb4e3f2147fd3db298407672ce28459.jpg)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(5) {background:url(https://file.moyublog.com/d/file/2021-06-22/c9bdc0f1f5bcb384ef03e17bb18d89ee.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(6) {background:url(https://file.moyublog.com/d/file/2021-10-27/t0rdkyxwt3r.jpg)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(7) {background:url(https://file.moyublog.com/d/file/2022-02-23/yejanqrnd14.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(8) {background:url(https://file.moyublog.com/d/file/2022-07-16/5147ea045abd3d0ee52cf83dcfb08c9d.jpg)center/cover no-repeat;
animation-delay: 42s;
}

.st .photo:nth-child(1) {
animation-play-state: paused;
}
.st .photo:nth-child(2){
animation-play-state: paused;
}
.st.photo:nth-child(3){
animation-play-state: paused;
}
.st .photo:nth-child(4){
animation-play-state: paused;
}
.st .photo:nth-child(5){
animation-play-state: paused;
}
.st .photo:nth-child(6){
animation-play-state: paused;
}
.st .photo:nth-child(7) {
animation-play-state: paused;
}
.st .photo:nth-child(8) {
animation-play-state: paused;
}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; bottom: 40px; left:94%;font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="testImg">
<div class='photo '></div>
<div class='photo ' ></div>
<div class='photo '></div>
<divclass='photo '></div>
<div class='photo ' ></div>
<div class='photo '></div>
<divclass='photo '></div>
<divclass='photo '></div>
</div>
<div id="mplayer"></div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/16/c4/af/92bb795d47a2b72e5b66f60f97913cac/audio.mp3" autoplay loop></audio>
<script>
var mState = () => {
      mplayer.style.setProperty('--opt', +aud.paused);

       mplayer.title = ['暂停','播放'][+aud.paused];
      };
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mplayer.onclick = () => aud.paused ? (aud.play(),image.classList.remove('st')): (aud.pause(),image.classList.add('st'));

var image= document.getElementById("testImg");
/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #ff0000, #ff0000, #ff0000 '+ aud.currentTime / aud.duration * 100 + '%, #eeeeee 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<script >
var lrc = `战马(DJ 九零版)-崔伟立
作词Lyricist：崔伟立
作曲Composer：崔伟立
制作人Producer：唐欣宇
宣发Promotion and distribution：廖文婷| 丁希莹| 黄嘉诺
统筹Coordinator：张丹娴
出品人Creator：胡伟
OP/SP：深圳启韵文化传媒有限公司
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
曾经的那个懵懂小孩他已经长大
也可以勇敢的面对这世界的复杂
不装聋作哑不沉默扮傻
用豪情万丈的初心化作千军万马
这岁月无情的染白那少年的头发
这时光像一个盗贼爬上我的脸颊
看江山如画要擦亮盔甲
要看遍这美丽世界所有繁华
哈哦
喔喔
哈哦
喔喔
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
要踏遍人间海角天涯
`;
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;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    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;


</script >

竹溪 发表于 2024-7-13 20:44

好看，欣赏。

红影 发表于 2024-7-13 21:15

漂亮的图片轮播。欣赏亚伦老师好帖{:4_187:}
这个好像没居中。

小辣椒 发表于 2024-7-13 22:20

欣赏亚伦的精彩制作，日日有新效果{:4_199:}

老谟深虑 发表于 2024-7-14 11:08

            欣赏老师的佳作，上午好！

查看完整版本: 战马(DJ 九零版)-崔伟立