亚伦影音工作室 发表于 2022-7-3 11:12

长城长 (原唱版) - 董文华

本帖最后由 亚伦影音工作室 于 2022-7-3 14:44 编辑 <br /><br /><style>
.papa { left: -300px; width: 1200px; height: 580px; 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: 580px; 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('http://pan.yinhuabbs.cn/view.php/588c078657604a406428e1cc86cf7134.jpeg') no-repeat center/cover;transform: rotateY(0deg); }
.papa::after { left: 50%; background: tan url('http://pan.yinhuabbs.cn/view.php/588c078657604a406428e1cc86cf7134.jpeg') no-repeat center/cover; transform: rotateY(180deg); }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotateY(-180deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox {   position: absolute; left: calc(-200% 50px);left: -320px; top: 420px; 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(160deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<div class="items1"><div class="papa"><video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/20/02/07/20020716520872302522.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: 30px;">
                        <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=41377648" 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','长城长 (原唱版) - 董文华'],
        ['10.00','词：阎肃'],
        ['19.00','曲：孟庆云'],
        ['29.00','都说长城两边是故乡'],
        ['35.00','你知道长城有多长'],
        ['42.00','它一头挑起大漠边关的冷月'],
        ['48.00','它一头连着华夏儿女的心房'],
        ['57.00','都说长城内外百花香'],
        ['64.00','你知道几经风雪霜'],
        ['70.00','凝聚了千万英雄志士的血肉'],
        ['77.00','托出万里山河一轮红太阳'],
        ['86.00','太阳照长城长'],
        ['96.00','长城啊雄风万古扬'],
        ['102.00','太阳照长城长'],
        ['112.00','长城啊雄风万古扬'],
        ['118.00','你要问长城在哪里'],
        ['124.00','就看那一身身一身身绿军装'],
        ['159.00','都说长城两边是故乡'],
        ['165.00','你知道长城有多长'],
        ['171.00','它一头挑起大漠边关的冷月'],
        ['178.00','它一头连着华夏儿女的心房'],
        ['187.00','都说长城内外百花香'],
        ['193.00','你知道几经风雪霜'],
        ['200.00','凝聚了千万英雄志士的血肉'],
        ['206.00','托出万里山河一轮红太阳'],
        ['216.00','太阳照长城长'],
        ['225.00','长城啊雄风万古扬'],
        ['232.00','太阳照长城长'],
        ['241.00','长城啊雄风万古扬'],
        ['247.00','你要问长城在哪里'],
        ['254.00','就在咱老百姓的心坎上心坎上']
];
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-3 14:39

用视频做底图也很不错的呢。这个歌曲和图片以及视频十分相配，欣赏亚伦老师好作品{:4_187:}

绿叶清舟 发表于 2022-7-3 15:39

这个创意真棒，制作漂亮

樵歌 发表于 2022-7-3 17:46

欣赏好作品。{:4_199:}

大猫咪 发表于 2022-7-8 15:35

创意真棒，制作漂亮！经典咏流传，谢谢朋友分享！周末快乐！

{:4_187:}{:4_199:}
页: [1]
查看完整版本: 长城长 (原唱版) - 董文华