思念绕指尖 (DJ名龙版) - 海鸟飞鱼 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2022-6-30 23:01

思念绕指尖 (DJ名龙版) - 海鸟飞鱼

本帖最后由亚伦影音工作室于 2022-7-2 10:35 编辑 <br /><br /><style type="text/css">.container{ z-index: 100;position: relative;width:1000px; height: 600px; margin-top:240px; margin-left:-130px; box-shadow:0px 0px 0px 2px #ffffff, 0px 0px10px 10px #880000;overflow:hidden;border-radius:0%;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030409205677912653.gif)0 0px/100% 100%, linear-gradient(0deg, #000080, #883300, #882222, #000000);transform: skewX(0deg) skewY(0deg); text-align: center;}

.square
{top: 76px;
left:110px;
position: absolute;
width: 782px;box-shadow:0px 0px 1px 2px #000000, 0px 0px 0px 6px #f0d4ad,0px 0px 0px 8px #000000;
height: 440px;
border-radius:0%;filter:contrast(150%);
}
.square:nth-child(1)
{animation:change1 25s ease infinite;}
.square:nth-child(2)
{animation:change2 25s ease infinite;}
.square:nth-child(3)
{animation:change3 25s ease infinite;}
.square:nth-child(4)
{animation:change4 25s ease infinite;}
@keyframes change1
{100% {background:#000000;transform: scale(.6, .6)translate(-100%,100%);}
95% {background:#000000;transform: scale(.4, .4)translate(-52%,52%) ;}
90% {background:#000000;transform: scale(.6, .6)translate(-52%,52%) ;}
85% {background:red;transform: rotateX(0deg)rotateY(180deg)scale(.6, .6)translate(52%,-52%); }
70% {background:#FFFFFF;transform: scale(.6, .6)translate(52%,-52%) ; }
65% {background:#550000;transform: scale(.6, .6)translate(-52%,52%)rotateX(-45deg)rotateY(20deg); }
60% {background:#FFFFFF;transform: scale(.6, .6)translate(-52%,-52%)rotateX(45deg)rotateY(20deg) ; }
55%{background:#00FF00;transform: rotateX(-180deg)scale(.6, .6)translate(-52%,52%); }
40%{background:#000080;transform: scale(.6, .6)translate(-52%,52%); }
35%{background:#fff080;transform: scale(.6, .6)translate(-52%,-52%); }
30%{background:#80000;transform: scale(.6, .6)translate(52%,-52%); }
25%{background:#00ff00;transform: scale(.4, .4)translate(52%,-52%); }
0%{background:#00ff00;transform: scale(.6, .6)translate(100%,-100%); }
}
@keyframes change2
{ 100% {background:#000000;transform: scale(.6, .6)translate(100%,-100%);}
95% {background:#000000;transform: scale(.4, .4)translate(52%,-52%);}
90% {background:#000000;transform: scale(.6, .6)translate(52%,-52%);}
85% {background:red;transform: rotateX(0deg)rotateY(-180deg)scale(.6, .6)translate(-52%,52%); }
70% {background:#FFFFFF;transform: scale(.6, .6)translate(-52%,52%);}
65% {background:#550000;transform: scale(.6, .6)translate(52%,-52%)rotateX(-45deg)rotateY(20deg); }
60% {background:#FFFFFF;transform: scale(.6, .6)translate(52%,52%)rotateX(45deg)rotateY(20deg) ; }
55%{background:#00FF00;transform: rotateX(180deg)scale(.6, .6)translate(52%,-52%); }
40%{background:#000080;transform: scale(.6, .6)translate(52%,-52%); }
35%{background:#fff080;transform: scale(.6, .6)translate(52%,52%) }
30%{background:#800000;transform: scale(.6, .6)translate(-52%,52%); }
25%{background:#00ff00;transform: scale(.4, .4)translate(-52%,52%); }
0%{background:#00ff00;transform: scale(.6, .6)translate(-100%,100%); }
}
@keyframes change3
{ 100% {background:#000000;transform: scale(.6, .6)translate(-100%,-100%);}
95% {background:#000000;transform: scale(.4, .4)translate(-52%,-52%);}
90% {background:#000000;transform: scale(.6, .6)translate(-52%,-52%);}
85% {background:red;transform: rotateX(180deg)rotateY(0deg)scale(.6, .6)translate(52%,52%); }
70% {background:#FFFFFF;transform: scale(.6, .6)translate(52%,52%) ; }
65% {background:#550000;transform: scale(.6, .6)translate(-52%,-52%)rotateX(-45deg)rotateY(20deg) ; }
60% {background:#FFFFFF;transform: scale(.6, .6)translate(52%,-52%)rotateX(45deg)rotateY(20deg) ; }
55%{background:#00FF00; transform: rotateX(0deg)rotateY(-180deg)scale(.6, .6)translate(52%,52%); }
40%{background:#000080;transform: scale(.6, .6)translate(52%,52%); }
35%{background:#fff080;transform: scale(.6, .6)translate(52%,-52%); }
30%{background:#800000;transform: scale(.6, .6)translate(-52%,-52%); }
25%{background:#00ff00;transform: scale(.4, .4)translate(-52%,-52%); }
0%{background:#00ff00;transform: scale(.6, .6)translate(-100%,-100%); }
}
@keyframes change4
{ 100% {background:#000000;transform: scale(.6, .6)translate(100%,100%);}
95% {background:#000000;transform: scale(.4, .4)translate(52%,52%);}
90% {background:#000000;transform: scale(.6, .6)translate(52%,52%);}
85% {background:red;transform: rotateX(-180deg)rotateY(0deg)scale(.6, .6)translate(-52%,-52%); }
70% {background:#FFFFFF;transform: scale(.6, .6)translate(-52%,-52%);}
65% {background:#550000;transform: scale(.6, .6)translate(52%,52%)rotateX(-45deg)rotateY(20deg) ; }
60% {background:#FFFFFF;transform: scale(.6, .6)translate(-52%,52%)rotateX(45deg)rotateY(20deg) ; }
55%{background:#00FF00; transform: rotateX(0deg)rotateY(180deg)scale(.6, .6)translate(-52%,-52%); }
40%{background:#000080;transform: scale(.6, .6)translate(-52%,-52%); }
35%{background:#fff080;transform: scale(.6, .6)translate(-52%,52%); }
30%{background:#800000;transform: scale(.6, .6)translate(52%,52%); }
25%{background:#00ff00;transform: scale(.4, .4)translate(52%,52%); }
0%{background:#00ff00;transform: scale(.6, .6)translate(100%,100%); }
}
</style>
<div class="container">
<div class="square"><img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" style="width: 100%; height: 100%;opacity:0.80;" /></div>

<div class="square"><img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" style="width: 100%; height: 100%;opacity:0.80;" /></div>

<div class="square"><img src="https://img-baofun.zhhainiao.com/fs/1466b196f4c66b49c325b0bc957c4317.jpg" style="width: 100%; height: 100%;opacity:0.80;" /></div>

<div class="square"><img src="https://img-baofun.zhhainiao.com/fs/bbb18a7e9c8f7aef5fe28d1d11811e82.jpg" style="width: 100%; height: 100%;opacity:0.80;" /></div>
<div class="playbox">
<p id="geci" class="items">缓冲中 ... </p> </div>
            <p style="padding: 0;margin: 440px 350px;width: 300px; height: 60px;background: rgba(255,255,255,.25); backdrop-filter: blur(2px); box-shadow: 1px 2px 2px #000;overflow: hidden;border-radius: 2%; text-align: center; position: relative;z-index: 250;">
                     <input id="btnplay" type="button" value="II" />
                     <input id="slider" type="range" min="0" max="100" value="0"style=" height: 4px;padding: 0;margin: 30px 0px;position: relative;z-index: 30;text-align: center;" />
                     <span id="per" style="width: 130px; height: 6px;padding: 0;margin: 30px 0px;font-size: 18px;color: #ffffff;position: relative;z-index: 30;text-align: center;">0:0 / 0:0</span>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=155270126" autoplay="autoplay" loop="loop"></audio>

</div>
<div style=" height: 400px;"></div>
<style>

.playbox { position: relative; left: 0px; top: 450px; padding: 10px;text-align: center;font: normal 2.8em sans-serif; color: #ff0000; font-family:华文隶书; 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); z-index: 40;}
#geci { width: 1000px; height: 80px;}
#btnplay { width: 30px; height: 30px; border-radius: 50%; position: relative;z-index: 400;}
#btnplay:hover { background: #cccccc; color: #ff0000; }
@keyframes rot { to { transform: scale3d(0,0,-200) skew(0,30deg); } }
</style>
<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','词：王敬苹'],
['0.00','思念绕指尖 (DJ名龙版) - 海鸟飞鱼'],
['1.00','曲：王敬苹'],
['2.00','尚若等到那一天'],
['4.00','和你再续写前缘'],
['6.00','再次重逢桃园的桥边'],
['10.00','看那伊人抚琴弦'],
['12.00','一醉梦千年'],
['14.00','怎奈夜深等不到月圆'],
['18.00','如果回到那一天'],
['20.00','风花雪月的从前'],
['22.00','看你嫣然一笑的侧脸'],
['26.00','等你山高路远'],
['27.00','踏遍万水千山'],
['30.00','雪染双鬓思念绕指尖'],
['49.00','十月风它吹送着秋天'],
['53.00','三月雨它坠落在春天'],
['57.00','你问我何时归期'],
['59.00','又不知在哪里'],
['61.00','是我的最遥远的距离'],
['65.00','不要问爱何时会相遇'],
['69.00','尚若在最初梦的那里'],
['73.00','最无尽的是思念'],
['75.00','你来过的夏天'],
['77.00','在我的漫长寒冷冬天'],
['81.00','尚若等到那一天'],
['83.00','和你再续写前缘'],
['85.00','再次重逢桃园的桥边'],
['89.00','看那伊人抚琴弦'],
['90.00','一醉梦千年'],
['92.00','怎奈夜深等不到月圆'],
['96.00','如果回到那一天'],
['98.00','风花雪月的从前'],
['100.00','看你嫣然一笑的侧脸'],
['104.00','等你山高路远'],
['106.00','踏遍万水千山'],
['108.00','雪染双鬓思念绕指尖'],
['128.00','不要问爱何时会相遇'],
['132.00','尚若在最初梦的那里'],
['135.00','最无尽的是思念'],
['138.00','你来过的夏天'],
['140.00','在我的漫长寒冷冬天'],
['144.00','尚若等到那一天'],
['146.00','和你再续写前缘'],
['148.00','再次重逢桃园的桥边'],
['152.00','看那伊人抚琴弦'],
['153.00','一醉梦千年'],
['155.00','怎奈夜深等不到月圆'],
['159.00','如果回到那一天'],
['161.00','风花雪月的从前'],
['163.00','看你嫣然一笑的侧脸'],
['167.00','等你山高路远'],
['169.00','踏遍万水千山'],
['171.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>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

红影发表于 2022-7-1 09:56

这个好看。四张美人图像翩飞的蝶儿，不断变幻，真漂亮{:4_187:}

红影发表于 2022-7-1 09:56

亚伦老师那么晚还在啊，辛苦了{:4_187:}

醉美水芙蓉 发表于 2022-7-1 20:49

页: [1]

花潮论坛's Archiver

思念绕指尖 (DJ名龙版) - 海鸟飞鱼