原来对你的爱是场多余 - 赵洋【利用图片切割代码】
本帖最后由 亚伦影音工作室 于 2022-7-4 08:51 编辑 <br /><br /><style>.papa { left: -250px; width: 1100px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/50f174093b7927860af378c71267bbde.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/fa701d8e55437cc8f82a18b9bb58a538.jpg)0 0/100% 100%;width: 100%; height: 100%; transition: all 4s linear;z-index: 10;transform: translate(0%,0%) rotateY(0deg); }
.papa::before {clip-path: polygon(0 100%, 50% 100%, 50% 0, 0 0);}
.papa::after {clip-path: polygon(100% 100%, 50% 100%, 50% 0, 100% 0); }
.papa:hover::before { transform: translate(0%,0%) rotate(360deg) scale(.65); }
.papa:hover::after { transform: translate(0%,0%) rotate(-360deg) scale(.65); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: -300px; top: 450px; padding: 0px; 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 3s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(30deg)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"></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=225043719" 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 = [
['1.00','原来对你的爱是场多余 - 赵洋'],
['3.00','词：于跃好'],
['4.00','曲：赵洋'],
['6.00','制作人：亚伦'],
['8.00','出品：亚伦影音工作室'],
['35.00','这么多年我不懈的努力'],
['38.00','追逐爱的路上坎坷崎岖'],
['42.00','只因当初 对你 太痴迷'],
['46.00','所以千山万水不放弃'],
['50.00','我以为有天能感动天地'],
['54.00','常常幻想我们相知相依'],
['58.00','不料你把别人拥入怀里'],
['61.00','让我疼痛的心将要窒息'],
['65.00','原来对你的爱是场多余'],
['69.00','我多么难过你并不在意'],
['73.00','如果这伤悲注定是结局'],
['77.00','我又何必再去勉强继续'],
['81.00','原来对你的爱是场多余'],
['85.00','我的付出也就毫无意义'],
['88.00','如果你把感情当游戏'],
['92.00','我愿彻底放手离你而去'],
['114.00','我以为有天能感动天地'],
['118.00','常常幻想我们相知相依'],
['121.00','不料你把别人拥入怀里'],
['125.00','让我疼痛的心将要窒息'],
['129.00','原来对你的爱是场多余'],
['133.00','我多么难过你并不在意'],
['137.00','如果这伤悲注定是结局'],
['141.00','我又何必再去勉强继续'],
['145.00','原来对你的爱是场多余'],
['148.00','我的付出也就毫无意义'],
['152.00','如果你把感情当游戏'],
['156.00','我愿彻底放手离你而去'],
['162.00','原来对你的爱是场多余'],
['166.00','我多么难过你并不在意'],
['170.00','如果这伤悲注定是结局'],
['174.00','我又何必再去勉强继续'],
['178.00','原来对你的爱是场多余'],
['181.00','我的付出也就毫无意义'],
['185.00','如果你把感情当游戏'],
['189.00','我愿彻底放手离你而去'],
['195.00','如果你把感情当游戏'],
['199.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>
大变美人啊，随着鼠标移动，那美人儿分解重组，并变小。真奇妙的制作。欣赏亚伦老师好帖{:4_187:}
页:
[1]