醉美水芙蓉 发表于 2022-7-9 16:52

为什么相爱不能在一起

<style>
.papa { left: -302px; width: 1200px; height: 620px; border-radius: 6px; background: tan url('https://img-baofun.zhhainiao.com/fs/cb193c68d0afbe7dbbe1e2647bd7f5f4.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
#vid { position: absolute; width: 1200px; height: 620px; left: 0px;top:0px; object-fit: cover; opacity: 1;z-index: 1;}
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 50%; height: 100%; transition: all 2s linear;z-index: 10; }
.papa::before { background: tan url('https://s1.ax1x.com/2022/07/09/jDsyHx.jpg') no-repeat center/cover;transform: rotateY(-180deg); }
.papa::after { left: 50%; background: tan url('https://s1.ax1x.com/2022/07/09/jDsyHx.jpg') no-repeat center/cover; transform: rotateY(0deg); }
.papa:hover::before { transform: translate(-120%,0%) rotate(0deg); }
.papa:hover::after { transform: translate(120%,0%) rotateY(180deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox {   position: absolute; left: calc(50% 50px); top: 410px; padding: 10px; font: normal 1em sans-serif; color: #FF0000; border-radius: 8px; overflow: hidden; z-index: 20; }
.playbox::before { position: absolute;text-align: center;left: 0; top: 0px; right: 0; bottom: 0; z-index: 20; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #eee; color: #ff0000; }
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
</style>
<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(150%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(150%)brightness(100%);}}
</style>
<div class="items1"><div class="papa"><video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/dfe7e15461d0051e052dd5f41eb78d7c_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video></div>


<div class="playbox">
                <div class="items"><p id="geci"style="width: 960px; margin-left: 120px;font-family:华文隶书;font-size: 2.8em;text-align: center;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);">LRC Loading ... </p>        </div>
                <p style="display: flex; align-items: center; gap: 4px; margin-left: 500px;margin-top: 0px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per"style="color: #eeeeee;font-size: 1.2em">0%</span>
                </p>
        </div>
        <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=197366849" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
        ['0.00','郭力 - 为什么相爱不能在一起'],
        ['1.07','作词：郭力'],
        ['2.05','作曲：郭力'],
        ['3.03','编曲：李德奎'],
        ['4.03','录音：董玲'],
        ['5.03','混音：卢晓武'],
        ['6.03','和声：俞子欣'],
        ['20.06','LRC编辑：醉美水芙蓉'],
        ['25.04','早知道我们不能够在一起'],
        ['31.03','为何还是偏偏对你着了迷'],
        ['38.00','你那迷人的眼神我难以抗拒'],
        ['43.04','就这样不知不觉的爱上你'],
        ['49.06','明知道这份情不能再继续'],
        ['55.05','为何还要爱得那么的彻底'],
        ['61.06','为你付出了真心换来了泪滴'],
        ['67.07','心甘情愿被你伤透我的心'],
        ['74.02','为什么相爱不能在一起'],
        ['79.08','难道这是命中的注定'],
        ['86.01','你可知道我有多么爱你'],
        ['91.10','我的生命里不能没有你'],
        ['98.01','为什么相爱不能在一起'],
        ['104.02','偏偏变成了伤心的回忆'],
        ['110.03','多么希望你能回心转意'],
        ['116.03','重新再回到我的怀里'],
        ['146.08','明知道这份情不能再继续'],
        ['152.08','为何还要爱得那么的彻底'],
        ['159.06','为你付出了真心换来了泪滴'],
        ['165.00','心甘情愿被你伤透我的心'],
        ['171.00','为什么相爱不能在一起'],
        ['177.00','难道这是命中的注定'],
        ['183.02','你可知道我有多么爱你'],
        ['189.02','我的生命里不能没有你'],
        ['195.03','为什么相爱不能在一起'],
        ['201.04','偏偏变成了伤心的回忆'],
        ['207.05','多么希望你能回心转意'],
        ['213.05','重新再回到我的怀里'],
        ['219.09','为什么相爱不能在一起'],
        ['225.07','难道这是命中的注定'],
        ['231.09','你可知道我有多么爱你'],
        ['237.08','我的生命里不能没有你'],
        ['243.09','为什么相爱不能在一起'],
        ['249.09','偏偏变成了伤心的回忆'],
        ['255.10','多么希望你能回心转意'],
        ['262.00','重新再回到我的怀里'],
        ['268.02','重新再回到我的怀里'],
        ['273.06','谢谢欣赏！']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}

</script>

马黑黑 发表于 2022-7-9 16:55

本帖最后由 马黑黑 于 2022-7-9 16:56 编辑

不错不错

加林森 发表于 2022-7-9 16:59

有创新，不错的。

梦油 发表于 2022-7-9 17:06

欣赏佳作，问候芙蓉。

醉美水芙蓉 发表于 2022-7-9 17:25

马黑黑 发表于 2022-7-9 16:55
不错不错

问候黑黑老师！谢谢欣赏点评！

醉美水芙蓉 发表于 2022-7-9 17:26

加林森 发表于 2022-7-9 16:59
有创新，不错的。

谢谢队长欣赏点评！

醉美水芙蓉 发表于 2022-7-9 17:26

梦油 发表于 2022-7-9 17:06
欣赏佳作，问候芙蓉。

问候梦油老师！谢谢欣赏支持！

加林森 发表于 2022-7-9 17:35

醉美水芙蓉 发表于 2022-7-9 17:26
谢谢队长欣赏点评！

{:4_180:}

马黑黑 发表于 2022-7-9 17:36

醉美水芙蓉 发表于 2022-7-9 17:25
问候黑黑老师！谢谢欣赏点评！

{:5_108:}

梦油 发表于 2022-7-9 20:29

醉美水芙蓉 发表于 2022-7-9 17:26
问候梦油老师！谢谢欣赏支持！

别客气。

四海八荒 发表于 2022-7-9 21:31

因为有缘无分{:4_173:}

醉美水芙蓉 发表于 2022-7-9 22:44

四海八荒 发表于 2022-7-9 21:31
因为有缘无分

谢谢四海老师欣赏点评！

红影 发表于 2022-7-10 08:07

很绚丽的制作，欣赏水芙蓉好帖{:4_187:}

大猫咪 发表于 2022-7-10 10:30

制作真漂亮！{:4_187:}画面浪漫唯美，欣赏水芙蓉好帖，歌听不到了 {:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-7-12 21:27

红影 发表于 2022-7-10 08:07
很绚丽的制作，欣赏水芙蓉好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2022-7-12 21:27

大猫咪 发表于 2022-7-10 10:30
制作真漂亮！画面浪漫唯美，欣赏水芙蓉好帖，歌听不到了

谢谢喵咪支持！

浅风儿 发表于 2022-7-13 16:26

凡事皆有因。或许没胆子表白过错了时机，也许在错误的时间相逢。

醉美水芙蓉 发表于 2022-7-13 17:45

浅风儿 发表于 2022-7-13 16:26
凡事皆有因。或许没胆子表白过错了时机，也许在错误的时间相逢。

谢谢美女欣赏点评！
页: [1]
查看完整版本: 为什么相爱不能在一起