【中伏消暑】第十九天 过尽千帆
本帖最后由 醉美水芙蓉 于 2022-8-14 18:46 编辑 <br /><br /><style type="text/css">.photo {width: 1024px;
height: 600px;
position: absolute;top:0px; left:-0px;
filter:contrast(150%)brightness(80%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 1;clip-path: polygon(0 100%, 50% 50%, 0 0, 0 0, 50% 50%, 100% 0, 100% 0, 50% 50%, 100% 100%, 100% 100%, 50% 50%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1)rotate(0deg);}
5% {
opacity: 1;clip-path: polygon(0 100%, 50% 50%, 0 0, 100% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 100% 100%, 0 100%, 50% 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: polygon(0 100%, 50% 50%, 0 0, 100% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 100% 100%, 0 100%, 50% 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 1;clip-path:polygon(0 100%, 50% 50%, 0 0, 100% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 100% 100%, 0 100%, 50% 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 0, 50% 50%, 100% 100%, 100% 100%, 50% 50%, 0 100%, 0 100%, 50% 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >
<style>
.papa { margin: 0 auto; width: 1024px; height: 600px;position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox {text-align: center; position: absolute; left: 20px; top: 540px; padding: 10px; font: normal 1em sans-serif; color: #ff0000; font-weight:bold ;overflow: hidden; z-index:
1; }
.playbox::before { position: absolute;content: '';margin: 20px 0px;left: 0; top: 0; right: 0; bottom: 0;filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%;box-shadow: 0px 0px 0px 3px #ff0000, 0px 0px 0px 5px #ffffff;}
#btnplay:hover { background: #cccccc; color: #ff0000; }
/*动画*/
.img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:430px; left:820px;transform: scale(1,0.6)rotateX(25deg) rotateY(-20deg)rotateZ(0deg);}
.img_border #aplay{border:2px solid #000000;border-radius:50%; }
.z360z{animation:rotating 10s linear infinite}
@keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}}
</style>
<style type="text/css">.bs{animation: slider0 0.14s linear infinite ;}
@keyframes slider0 {from {
opacity: 1;filter:hue-rotate(360deg)contrast(130%)brightness(200%);
}
50% {
opacity: 1;
}
to {
opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);
}
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:30px; margin-left:-220px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/50%50%,linear-gradient(0deg, #000080, #000000, #222222, #000000); text-align: center;">
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e9bbb35160805966217fc945050f64d0.jpg)0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6744c08e56024b195b80e1d8bd022f4e.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e83a2f3ed4183d39f56eaa805261a57d.jpg )0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3161ddbb1ba56c65dc6504fad571cd03.jpg )0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/980e4058afc4c6269c12ff4942b47e10.jpg)0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cca52b1a62e7e197fffa68a0bc9a1c8.jpg )0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f1f35a206dc7358a83096840f2ce0bb6.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/2abee4de0a78ea8aee3731b842162a07.jpg)0 0px/100% 100%;" />
<divclass="papa">
<div class="bs">
<p id="geci" style="width: 960px; height: 150px;z-index: 3;text-align: center; position: absolute;top:480px;color: #ff0000; left:30px;font-family:华文隶书;font-size: 45px;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>
<input id="slider" type="range" min="0" max="100" value="0"style="width: 1024px; height: 1px;z-index: 200;align-items: center;position: absolute;top:540px; left:-2px; "/>
</div>
<div class="playbox">
<div class="bs"><p style="display: flex; align-items: center; gap: 800px; margin-top: 10px;">
<input id="btnplay" type="button" value=">"style="color: #ff0000;font-size:20px;font-weight:bold" />
<span id="per">0%</span>
</p></div>
</div></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=80767264&.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;"
></div>
</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.01','周深 - 过尽千帆'],
['0.02','作词：顾钊羽'],
['0.04','作曲：汪哲俊'],
['0.06','编曲：何官錠AL'],
['0.09','制作人：徐威、周深'],
['1.01','配唱制作人：徐威'],
['1.05','和声编写：徐威、周深'],
['1.08','和声演唱：周深'],
['2.01','录音师：徐威'],
['2.02','录音棚：V-Studio（上海）'],
['2.05','混音师：周天澈'],
['2.08','混音棚：Studio21A'],
['3.01','OP：喜百音 Hit Melody'],
['3.05','SP：Warner/Chappell Music Publishing Agency (Beijing) Ltd.'],
['4.09','艺人经纪公司：梦响强音文化传播（上海）有限公司'],
['10.06','LRC编辑：醉美水芙蓉'],
['15.01','夕阳它 流淌着 熟悉的墙'],
['20.06','岁月它 蹉跎了 你的脸庞'],
['25.08','孤单长路 各自在 奔四方'],
['37.06','星辰里 大海上 世事无常'],
['43.01','阔别的 光阴里 从不存放'],
['48.02','我在今夜 梦回到 老地方'],
['58.09','在这干干净净的尘世间'],
['64.03','我们分分合合的一瞬间'],
['69.08','都是生生世世的缘深浅'],
['74.01','呼过尽千帆 地球横越'],
['80.10','呼只为途中 与你相见'],
['93.04','白云它 流转在 一世心房'],
['98.07','记忆它 回旋在 八识田上'],
['103.08','孤单人影 拉的 越来越长'],
['114.06','在这干干净净的尘世间'],
['119.09','我们分分合合的一瞬间'],
['125.06','都是生生世世的缘深浅'],
['130.00','呼过尽千帆 地球横越'],
['136.05','呼说完再见 还能再见'],
['164.06','在这干干净净的尘世间'],
['170.02','我们分分合合的一瞬间'],
['175.08','都是生生世世的缘深浅'],
['180.01','呼过尽千帆 地球横越'],
['187.00','在这干干净净的尘世间'],
['192.06','我们分分合合的一瞬间'],
['198.01','都是生生世世的缘深浅'],
['202.03','呼过尽千帆 地球横越'],
['209.02','呼说完再见 还能再见'],
['216.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 = 'll');
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');
}
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";}; var lyric = parseLyric(geci);
</script>
欣赏楼主佳作 欣赏水芙蓉精彩的制作{:4_199:} 马黑黑 发表于 2022-8-14 19:39
欣赏楼主佳作
黑黑老师晚上好！ 小辣椒 发表于 2022-8-14 19:47
欣赏水芙蓉精彩的制作
辣椒美女晚上好！ 欣赏佳作，问候芙蓉。 醉美水芙蓉 发表于 2022-8-14 20:08
黑黑老师晚上好！
{:4_190:} 欣赏，制作漂亮啊 这歌好听{:4_187:} 图图精美，歌声冻银{:4_187:} 好漂亮的制作，水芙蓉真棒{:4_187:} 绿叶清舟 发表于 2022-8-14 21:11
欣赏，制作漂亮啊
清舟美女晚上好！ 小九 发表于 2022-8-14 21:12
这歌好听
谢谢小九美女欣赏支持！ 樵歌 发表于 2022-8-14 21:29
图图精美，歌声冻银
谢谢樵歌欣赏支持！ 红影 发表于 2022-8-14 22:02
好漂亮的制作，水芙蓉真棒
谢谢红影美女欣赏支持！ 梦油 发表于 2022-8-14 20:15
欣赏佳作，问候芙蓉。
谢谢梦油老师欣赏支持！ 醉美水芙蓉 发表于 2022-8-15 19:06
谢谢红影美女欣赏支持！
问好水芙蓉，新周快乐{:4_187:} 醉美水芙蓉 发表于 2022-8-15 19:08
谢谢梦油老师欣赏支持！
芙蓉朋友别客气。 醉美水芙蓉 发表于 2022-8-15 19:06
谢谢樵歌欣赏支持！
瞧瞧，这美女又谦虚了{:4_189:} 醉美水芙蓉 发表于 2022-8-15 19:05
清舟美女晚上好！
晚上好芙蓉
页:
[1]
2