请带着浪漫远航
本帖最后由 亚伦影音工作室 于 2022-8-1 15:53 编辑 <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 50%, 0 50%, 0 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
5% {
opacity: 1;clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
8% {
opacity: 1;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
12% {
opacity: 1;clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
20% {
opacity: 0;clip-path: polygon(100% 0, 100% 100%, 0 100%, 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:-130px;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%,url(https://img-baofun.zhhainiao.com/fs/6a44bce7d4c07c72a9732e8c4c523d58.jpg)0 0/100%100%; text-align: center;">
<img class='photo' style="background: url(http://pan.yinhuabbs.cn/view.php/9e9c5098b153c072b6267144b64d8b8c.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/6181eb26ac88a59addf1d370a60fb939.jpg)0 0px/100% 100%;" />
<img class='photo' style="background:url(http://pan.yinhuabbs.cn/view.php/ff5f2d2be7ce1babd2b9169175d339c5.jpg)0 0px/100% 100%;" />
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/9e69bdc582abdbac2f5c1c5abdd8c5ed.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://pan.yinhuabbs.cn/view.php/a905c1fbb60ea4361363344ee14515ca.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/0017ca9e2002def5011d592a8f5c8aae.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/d51ab2bbcc147702ae847be807a9e0b7.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://pan.yinhuabbs.cn/view.php/c115ec11b4f31e4e4e9f6163fb77ef99.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/mp3/music226556808.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.00','请带着浪漫远航 (《冲出地球》电影主题曲) - 周深'],
['4.00','曲：朱芸编'],
['5.00','词：小驴'],
['5.00','代码：独家制作 谨慎使用'],
['5.00','监制：王竞'],
['5.00','音乐统筹：陈欣/戴维丝'],
['5.00','制作人：亚伦'],
['6.00','OP/SP：天津光合世纪文化有限公司'],
['16.00','人类顺应长大 禁止飞行出发'],
['29.00','可没梦的地球 没有花'],
['34.00','光呢 在哪'],
['42.00','固执爱一朵花 履行浪漫梦话'],
['55.00','就算嘲笑我是一个空想家'],
['62.00','也要 飞啊'],
['66.00','我会变成太阳 宇宙远航'],
['72.00','星辰万千做翅膀飞翔'],
['79.00','带来不落的 白昼漫长'],
['86.00','绝对不要消陨 锋芒'],
['92.00','我偏要做太阳 燃烧心脏'],
['99.00','拆掉永夜黑暗中的网'],
['106.00','尘埃也能 亲吻月亮'],
['113.00','永远向着星际 仰望'],
['123.00','谁总说你啊 你啊'],
['130.00','飞翔是天真 幻想'],
['137.00','可是长大都会有'],
['142.00','风浪 不要怕'],
['145.00','现在 飞吧'],
['149.00','我偏要做太阳 燃烧心脏'],
['156.00','拆掉永夜黑暗中的网'],
['162.00','尘埃也能够 亲吻月亮'],
['170.00','永远向着星际 仰望'],
['176.00','依然为一个梦 跌跌撞撞'],
['182.00','那并不可笑 有人向往'],
['189.00','星星虽小 也有光芒'],
['196.00','终汇聚成耀眼天象'],
['205.00','请勇敢起航 向着远方'],
['213.00','带着浪漫和 希望'],
['220.00','即使是被嘲笑的梦想'],
['220.00','致少年：'],
['221.00','也要有不问结果而出发的勇气呀'],
['222.00','贝斯：曾浩威'],
['222.00','编曲：朱芸编'],
['222.00','钢琴：朱芸编'],
['222.00','吉他：周铭辉'],
['223.00','鼓：徐協倫'],
['223.00','监棚：朱芸编'],
['223.00','弦乐：周铭辉@国际首席爱乐乐团'],
['223.00','弦乐监制：李朋'],
['224.00','和声：周深'],
['224.00','混音/母带：周天澈@Studio21A（Beijing）'],
['224.00','配唱/录音：徐威@52Hz Studio（Shanghai）'],
['224.00','音乐制作：芸编（北京）音乐'],
['225.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 = '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_187:} 这个制作真漂亮，特技有点多。大赞！
页:
[1]