论坛 › 欢乐水吧 › 我的美丽 (feat.海洋Bo) - 海洋Bo/高睿[]

亚伦影音工作室 发表于 2023-9-21 14:43

我的美丽 (feat.海洋Bo) - 海洋Bo/高睿[]

本帖最后由 亚伦影音工作室 于 2023-9-21 14:59 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background:#000000 ;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 2%,#000000    8%,rgba(2, 2, 2, 0) 30%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);opacity: 0;}
#papa:hover #mb { display:block ;opacity: 1;}

#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;}
#mplayer {position: absolute; left: 0%;top:92%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 0;}

#papa:hover #mplayer { display:block ;opacity: 1;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}

</style>

<div id="papa">

<span id="fullscreen">全屏</span>
<div id="mb"></div>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff54d79ff2ebf815ef1b29d476374829_preview.mp4" muted autoplay></video>

<divid="mplayer"><audiostyle="width:100%;" id="aud"   controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music299436516.mp3" type="audio/mpeg"></audio></div>
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
</div>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:80%; left:0%;
    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;}
</style>
<script >
var lrc = `我的美丽 (feat.海洋Bo) - 海洋Bo/高睿
原唱：小霞
午后温暖的阳光温柔闪耀
雨后绚烂的彩虹五彩斑斓
炎热的夏日 一丝凉风 掠过耳边
一道美丽的风景 留恋留恋
抚摸斑驳的树影转圈盘旋
金色夕阳的呓语绕耳缠绵
你看我看的 这个世界 美好至极
你看呐我的所有 都是我的美丽
生活的方式从来不换
早上到傍晚也一成不变
马路上的人们匆匆奔走
安静的路口早已车满为患
每个人的梦里都存在焦虑
晚睡早起又白黑交替
书包装的也换成压力
在同世界却没共同话题
也许还有人坐在
回家的路口等你等你下班
木质的圆桌摆满了他给你做的大餐
千万不要放弃你所追求的东西
我始终相信每个人都有独特的美丽
抚摸斑驳的树影转圈盘旋
金色夕阳的呓语绕耳缠绵
你看我看的 这个世界 美好至极
你看呐我的所有 都是我的美丽
你说你受到了不公平
可是大多人的生活也差不多
要走的路刚好又不通行
又背上莫名其妙的锅
想去看看世界的另一边
可是现在没钱也没时间
往后又要拿钱换时间
现在要拿时间换钱
为什么
这世界如此的悲观
眼睛看到的只有黑暗
18年都没女孩喜欢
这种成就也相当极端
刚攒好钱球鞋又涨价
又被朋友们讽刺的想法
幻想早被现实给绑架
想要野马却只有桑塔纳
指尖 时间总不给我机会
也怪我追不到机位
旋转
任何故事当不了主角
做的决定也太过于愚昧
萦绕
还好没人看见我失态
我的人生充斥着失败
耳边
只是这世界变化太快
我被排除在节奏之外
心跳
疯狂
留恋
我的美丽
改编词：young-seven67/海洋Bo
原编曲：秦四风
吉他：小贾
混音：何世渝
母带：何世渝
`;
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;


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);

</script>

<script>
var dts = ["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff54d79ff2ebf815ef1b29d476374829_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0febdc4d9660edc6b4576c1c1dbc620c_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/097d22b11081d458bc107813f27f7dc0_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/02e3f2bedd6f62d779c66bcea8e202c2_preview.mp4"
];
var dt= document.getElementById('vid');
var dtIdx = 1;
dt.onended = function()      {
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</script>

坐看云起 发表于 2023-9-21 14:54

小姐姐真美。

红影 发表于 2023-9-21 15:53

这么多美女视频，让人看得赏心悦目。收集起来肯定很不容易吧。欣赏亚伦老师好帖，辛苦了{:4_199:}

查看完整版本: 我的美丽 (feat.海洋Bo) - 海洋Bo/高睿[]